javascript - 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.4.0-beta.4起，并且在 v5.0.0 中正式发布，您现在可以指定解析为组件的路径数组，例如

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

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

可以找到此方法的文档 here .

React Router v6 更新

React Router v6不再允许将路径数组作为 Route 属性传递。相反，您可以使用 useRoutes (有关文档，请参阅 here)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>
  );

您可以看到此代码工作的扩展示例 here .

这个答案的关键是:

The useRoutes hook is the functional equivalent of <Routes>, but it uses JavaScript objects instead of <Route> elements to define your routes.