时间戳

首页 > 解决方案 > React-router 获取嵌套路由路径名的最佳实践

reactjs - React-router 获取嵌套路由路径名的最佳实践

问题描述

我有一个类似下面代码的 React 路由：

<Route path='/settings' component={Settings} />

在 Settings 组件内部，它有 3 个嵌套路由：

 <Route path='/settings/general' component={GeneralSetting} />
 <Route path='/settings/team' component={TeamSetting} />
 <Route path='/settings/email' component={EmailSetting} />

所以我的问题是如何在没有父路由（'/settings'）的情况下才能在最正确的位置（例如'/general'，'/email'）获得嵌套路径名。目前，我在位置路径名（/settings/general）上使用字符串拆分器来实现这一点。这种情况有什么最佳做法吗？

我很感激任何帮助。提前致谢。

标签： reactjsreact-routerreact-router-v4react-router-dom

解决方案

IMO，没有在反应路由器中获取子路径的最佳实践。您在位置上使用字符串拆分器，但这很好。如果您仍然需要仅获取子路径，则可以在 url 中使用参数并根据下面的参数渲染组件

<Route path='/settings/:type' component={Type} />

在类型（渲染子组件的新组件）组件中，您可以获得如下所示的参数

this.props.match.params.type

这将根据您的网址为您提供一般、团队和电子邮件价值。

推荐阅读