React Router中同一组件的多个路径名

Question

我在三个不同的路线上使用相同的组件:

<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>

Answer 1

至少对于react-router v4,它path可以是一个正则表达式字符串,所以你可以这样做:

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

正如你所看到的那样,它有点冗长,所以如果你的component/ route很简单,这可能是不值得的.

当然,如果这实际上经常出现,你总是可以创建一个包含数组paths参数的包装组件,它可以.map重复使用正则表达式或逻辑.

Answer 2

从react-router v4.4开始,您现在可以指定一个解析为组件的路径数组,例如

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

数组中的每个路径都是正则表达式字符串.

可以在此处找到此方法的文档.

Answer 3

我不认为这是不幸的.

您可以map像使用任何其他JSX组件一样使用a :

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

编辑

只要路径到regexp支持,你也可以使用regex作为react-router v4中的路径.有关详细信息,请参阅@ Cameron的答案.

Answer 4

从 React Router v6 开始，他们删除了正则表达式的选项，根据类型定义，它又是这样path: string。目前，为了方便起见，您必须再次拼写每条路径或使用地图：

<Routes>
    {['home', 'users', 'widgets'].map(path => <Route path={path} element={<Home />} />)}
</Routes>

另请参阅https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns

Answer 5

从 react-route-dom v5.1.2 开始，您可以传递多个路径，如下所示

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

显然，您需要在顶部导入 Home jsx 文件。

Answer 6

使用react-router v6，你可以这样做：

<Routes>
  {['path1', 'path2'].map((path) => (
            <Route key={--> you should use some unique key <--} path={path} element={<SomeComponent />} />
  ))}
</Routes>

反应路由器文档说：

React Router v6 使用简化的路径格式。<Route path>在 v6 中仅支持 2 种占位符：动态:id样式参数和*通配符。

https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns