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>

原文由 Chetan Garg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 react-router v4.4.0-beta.4 开始，正式在 v5.0.0 中，您现在可以指定一个解析为组件的路径数组，例如

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

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

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

React Router v6 更新

React Router v6 不再允许将路径数组作为 Route 属性传递。相反，您可以使用 useRoutes （参见 此处 的文档）React 挂钩来实现相同的行为：

 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> 元素来定义您的路线。

原文由 Ben Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议