Question

我有这个特殊的用例，找不到任何解决方案。我需要对不同的路径使用相同的组件，但是不幸的是，路径确实不同，如以下模式中所述

/targetpath/:targetpathId
/somepath/:somepathId/targetpath/:targetpathId
/somepath/:somepathId/someotherpath/:someotherpathId/targetpath/:targetpathId

我不想为每种情况写每条路线，因为它不能扩展。我也有其他嵌套路线等... 所以我试图以这种方式动态地写路径

<Switch>
  <Route
    path={`${match.url}/targetpath/:targetpathId`}
    component: Photo
  />
  //Other routes...
</Switch>

但是由于路线的长度可变，因此每次都无法使用

我正在尝试使用正则表达式，但仍然没有运气

有人遇到过这个问题吗？

Answer 1

以这种方式创建路由似乎是不明智的。您可以简单地定义一个加载相同组件的不同路由。

<Route to='/path1' component={MyComponent} />
<Route to='/path2' component={MyComponent} />

是的，必须将每个组件都写出来很麻烦，但是它更加直观，而且您实现错误的可能性也较小。

Answer 2

好的，感谢Drusto，我已经解决了这个问题

path="(^.*)/targetpath/:targetpath"

但是总的来说，克里斯托弗·恩戈（Christopher Ngo）是对的，这是一个糟糕的路由设计，因此，我决定采用另一种方法

React-router不同路径相同组件

2 个答案: