我将同一组件用于三个不同的路由:
<Router>
<Route path="/home" component={Home} />
<Route path="/users" component={Home} />
<Route path="/widgets" component={Home} />
</Router>
有没有反正要合并起来,要像:
<Router>
<Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>
9条答案
按热度按时间92dk7w1h1#
其他选项:使用路由前缀.
/pages
。您将得到/pages/home
/pages/users
/pages/widgets
然后在
Home
组件内部详细解析。kknvjkwl2#
使用react-router v6,您可以执行以下操作:
React路由器文档说:
React Router v6使用简化的路径格式。v6中的
<Route path>
仅支持两种占位符:动态:id
样式参数和*
通配符。https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns
lvmkulzt3#
根据React Router文档,proptype 'path'的类型为字符串。因此,您无法将数组作为属性传递给路由组件。
如果您的目的只是改变路线,您可以将相同的组件用于不同的路线,没有问题
v7pvogib4#
下面是一个小函数,用于将具有
paths
属性自定义路由转换为react-router
v6支持的多个标准路由(具有path
属性):iaqfqrcu5#
从react-router v4.4.0-beta.4开始,以及在v5.0.0中的正式版本,您现在可以指定解析到组件的路径数组,例如
数组中的每个路径都是正则表达式字符串。
此方法的文档可在here中找到。
React路由器v6的更新
React Router v6不再允许将路径数组作为Route属性传递。相反,您可以使用
useRoutes
(参见此处的文档)React挂钩来实现相同的行为:您可以看到此代码在here上工作的扩展示例。
这个答案的关键在于:
useRoutes钩子在功能上等同于
<Routes>
,但它使用JavaScript对象而不是<Route>
元素来定义路由。ohtdti5x6#
至少在react-router v4中,
path
可以是一个正则表达式字符串,所以你可以这样做:正如你所看到的,它有点冗长,所以如果你的
component
/route
像这样简单,它可能不值得。当然,如果经常出现这种情况,你可以创建一个 Package 组件,它接受一个数组
paths
参数,它可重用地执行regex或.map
逻辑。esyap4oy7#
我不认为这是如果你使用的版本的React路由器低于v4。
您可以像使用任何其他JSX组件一样使用
map
:编辑
只要path-to-regexp支持路径in react-router v4,你也可以用正则表达式来表示路径in react-router v4。
fae0ux8s8#
从react router v6开始,他们删除了regex选项,根据类型定义,它仍然是
path: string
。目前,你必须重新拼写每个路径,或者使用map来方便:另请参阅https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns
fnvucqvd9#
从react-route-dom v5.1.2开始,您可以传递多个路径,如下所示
显然,您需要在顶部导入Home jsx文件。