使用 react-router-dom 在子组件中路由
Routing in child component using react-router-dom
我正在为 React 仪表板使用 CoreUI Pro 模板,并尝试将登录功能集成到其中。我的登录使用的是 AWS Cognito,所以我在该部分使用 this 教程。
我遇到的问题是,一旦登录,链接就失效了。
我的最高水平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。
您正在嵌套路线 - 请参阅示例以供参考 here。
问题是,您在 Full
组件的路由中具有 exact 属性,因此当浏览到 /locations
路线。我建议重组你的路线,这样你就可以像上面的例子一样构造它(例如 /dashboard/deliveries
)。
然后你会在顶级路由中省略 exact 属性,并在你的 Full
组件中有这样的路由:
<Route
path={this.props.match.url + '/deliveries/listDeliveries'}
name='List Deliveries'
component={ListDeliveries}
/>
这将匹配路线 /dashboard/deliveries/listDeliveries
。
我正在为 React 仪表板使用 CoreUI Pro 模板,并尝试将登录功能集成到其中。我的登录使用的是 AWS Cognito,所以我在该部分使用 this 教程。
我遇到的问题是,一旦登录,链接就失效了。
我的最高水平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。
您正在嵌套路线 - 请参阅示例以供参考 here。
问题是,您在 Full
组件的路由中具有 exact 属性,因此当浏览到 /locations
路线。我建议重组你的路线,这样你就可以像上面的例子一样构造它(例如 /dashboard/deliveries
)。
然后你会在顶级路由中省略 exact 属性,并在你的 Full
组件中有这样的路由:
<Route
path={this.props.match.url + '/deliveries/listDeliveries'}
name='List Deliveries'
component={ListDeliveries}
/>
这将匹配路线 /dashboard/deliveries/listDeliveries
。