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

我将相同的组件用于三条不同的路由：

<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>
136177 次浏览
小开

如果你使用低于V4的React路由器版本，我不认为它是。

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

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

编辑

只要正则表达式路径支持，您还可以将正则表达式用于路径在React-Router v4中。更多信息请看@Cameron的回答。

小开

根据React Router文档，PropType ' path '的类型为String.因此，您无法将数组作为属性传递给路由组件。

如果你只想改变路线，你可以在不同的路线上使用相同的组件，这没有问题。

小开

至少在react-router v4中，__abc0可以是正则表达式字符串，因此您可以执行以下操作：

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

正如您所看到的，它有点冗长，因此如果您的component/route像这样简单，则可能不值得这样做。

当然，如果这种情况经常出现，您总是可以创建一个包装组件，该组件接受一个数组__abc0参数，它可以重复使用regex或__abc1逻辑。

小开

其他选项：使用路由前缀。例如，/pages。 你会得到

  • /pages/home
  • /pages/users
  • /pages/widgets

然后在Home组件中以详细的方式对其进行解析。

<Router>
<Route path="/pages/" component={Home} />
</Router>
小开

从react-routerV4.4.0-Beta.4开始，在V5.0.0中，您现在可以指定解析到组件的路径数组，例如

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

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

此方法的文档可以在在这里中找到。

React路由器V6的更新

React路由器V6不再允许将路径数组作为路由属性传递。相反，您可以使用useRoutes（有关文档，请参阅在这里）React Hook来实现相同的行为：

import React from "react";
import {
BrowserRouter as Router,
useRoutes,
} from "react-router-dom";


const element = <Home />;
const App = () =>
useRoutes(['/home', '/users', '/widgets'].map(path => ({path, element})))


const AppWrapper = () => (
<Router>
<App />
</Router>
);

您可以看到此代码在这里工作的扩展示例。

从这个答案中得出的关键是：

Useroutes钩子在功能上等同于<Routes>，但它 使用JavaScript对象而不是<Route>元素来定义 路线.

小开

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

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

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

小开

从React Router V6开始，他们删除了regex的选项，并且根据类型定义，它再次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

小开

使用React-Router V6，您可以这样做：

<Routes>
{['path1', 'path2'].map((path) => (
<Route path={path} element={<SomeComponent />} />
))}
</Routes>

React-Router文档说：

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

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

小开

下面是一个小函数，用于将具有paths属性的自定义路由转换为具有path属性的react-router V6支持的多个标准路由：

const normalizeRoutes = (routes) =>
routes.reduce((acc, curr) => {
const newRoute = curr.children
? { ...curr, children: normalizeRoutes(curr.children) }
: curr;
if (newRoute.paths) {
return [
...acc,
...newRoute.paths.map((path) => {
const { paths, ...rest } = newRoute;
return { ...rest, path };
})
];
}
return [...acc, newRoute];
}, []);

提交答案