0

我正在为 React 仪表板使用 CoreUI Pro 模板，并尝试将登录功能集成到其中。我的登录是使用 AWS Cognito，所以我在这部分使用本教程。

我遇到的问题是，一旦登录，链接就不起作用了。

我的顶级 routes.js 如下。

export default ({ childProps }) =>
  <HashRouter>
    <Switch>
      <AppliedRoute path='/' exact component={Login} props={childProps} />
      <UnauthenticatedRoute path='/login' exact component={Login} props={childProps} />
      <AuthenticatedRoute path='/dashboard' exact component={Full} props={childProps} />
      <Route component={NotFound} />
    </Switch>
  </HashRouter>

在登录组件中，我重定向到 /dashboard 并且工作正常。Full 是包含仪表板的组件的名称。

一旦用户处于完整组件中，我希望他们能够四处导航：

<Container fluid>
              <Switch>
                <Route path='/dashboard' name='Dashboard' component={Dashboard} />
                <Route path='/deliveries/listDeliveries' name='List Deliveries' component={ListDeliveries} />
                <Route path='/shifts/listShifts' name='List Shifts' component={ListShifts} />
                <Route path='/locations/' name='Locations' component={Locations} />
                <Redirect from='/' to='/dashboard' />
              </Switch>
            </Container>

在 CoreUI 模板中这是可行的，但对我来说，如果我在登录后导航到 /locations，它会转到我的 404 页面。我曾考虑将所有内容都移至 routes.js，但问题是 Full 有一个围绕页面的模板，它只是在页面的一个区域加载诸如 Locations 之类的组件。

4

1 回答 1

0

您正在嵌套路由 - 请参阅此处的示例以供参考。

问题是，您在到组件的路由中具有确切的属性，因此在浏览到该路由Full时组件不会呈现。/locations我建议重组你的路线，这样你就可以像上面的例子一样构建它（例如/dashboard/deliveries）。

然后你会在顶级路由中省略确切的Full属性，并在你的组件中有这样的路由：

<Route 
  path={this.props.match.url + '/deliveries/listDeliveries'}
  name='List Deliveries'
  component={ListDeliveries}
/>

这将匹配路线/dashboard/deliveries/listDeliveries。

于 2018-09-07T15:32:52.257 回答