首页 > 解决方案 > React SPA 在开发机器上工作,但只有一级路由在 Azure 上工作

问题描述

在将我在本地工作的 React 应用程序发布到 Azure 后,我注意到所有路由都像

'/登录' '/用户' '/公司'

工作,但像

'/目录/客户'

不要。作为测试,我将上面的“客户”移动到 /clients 并且有效,但随后 /clients/ABC 没有。显然,我的路由有些问题,我想我错过了一些简单的东西,但我就是不能指望它。

我的应用程序是一个带有 web api .net 核心后端的反应前端。

routes.js /firm 中的示例有效,而 /directory/clients 无效。

  { path: '/firm', exact: true, name: 'Firm', component: Firm },
  //{ path: '/clients', exact: true, name: 'Clients', component: Clients },
  { path: '/directory/clients', exact: true, name: 'Clients', component: Clients },
  { path: '/directory/clients/clientsimport', exact: true, name: 'Client Import', component: ClientsImport },
  { path: '/directory/clients/:clientId/clientaccount/:id', exact: true, name: 'Client Account', component: ClientAccount },
  { path: '/directory/clients/:id', exact: true, name: 'Client', component: Client },
          <main className="main">
            <AppBreadcrumb appRoutes={routes}/>
            <Container fluid>
              <Switch>
                {routes.map((route, idx) => {
                  return route.component ? <Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => 
                    sessionStorage.getItem('token') 
                      ? <route.component {...props} />
                      : <Redirect to="/login" />
                  } />
                    : null;
                  },
                )}
                <Redirect from="/" to="/directory/clients" />
              </Switch>
            </Container>
          </main>

在此处输入图像描述

标签: reactjsazureasp.net-coreazure-web-app-service

解决方案


在此处输入图像描述

通过 Azure 中的虚拟目录应用程序使其工作。web.config url 重写方法本身不起作用。上面的路径显然是示例。


推荐阅读