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

javascript reactjs react-router path url-routing

2022-08-30 01:38:11

我正在对三个不同的路由使用相同的组件：

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

答案 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 属性传递。相反，你可以利用 React 钩子（参见此处的文档）来实现相同的行为：useRoutes

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

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

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

您可以在此处看到此代码的扩展示例。

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

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

答案 2

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

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

正如你所看到的，它有点冗长，所以如果你的/像这样简单，它可能不值得。componentroute

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