【问题标题】:React-router best practice to get nested route pathnameReact-router 获取嵌套路由路径名的最佳实践
【发布时间】:2019-09-04 07:10:41
【问题描述】:

我有一个类似下面代码的 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} />

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

感谢您的帮助。提前致谢。

【问题讨论】:

  • 使用精确的&lt;Route exact path='/general' component={GeneralSetting} /&gt;
  • @Omer,感谢您的回复,但我想通过路由 '/settings/general' 进入常规设置。
  • mm 你在这里的意思是:“只有没有父路由('/settings')。” ?
  • 我的意思是我仍然通过 '/settings/general' 进入 GeneralSettings 然后我得到 location.pathname 是 '/settings/general',我只想获取文本 '/general'
  • @QuocVanTang 你想用嵌套路径名做什么?

标签: reactjs react-router react-router-v4 react-router-dom


【解决方案1】:

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

&lt;Route path='/settings/:type' component={Type} /&gt;

在类型(渲染子组件的新组件)组件中,您可以获得如下参数

this.props.match.params.type

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

【讨论】:

  • 感谢您的回复,这也是一个不错的方法,但是在此之后,我们将根据 :type 参数在 Type 组件中进行条件渲染(General、Team、Email 三个之一),对
  • 对,有一些权衡
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-11-04
  • 1970-01-01
  • 1970-01-01
  • 2016-11-30
  • 2015-02-21
相关资源
最近更新 更多