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

ef1yzkbh  于 2022-11-29  发布在  React
关注(0)|答案(9)|浏览(169)

我将同一组件用于三个不同的路由:

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

92dk7w1h1#

其他选项:使用路由前缀. /pages。您将得到

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

然后在Home组件内部详细解析。

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

kknvjkwl2#

使用react-router v6,您可以执行以下操作:

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

React路由器文档说:
React Router v6使用简化的路径格式。v6中的<Route path>仅支持两种占位符:动态:id样式参数和*通配符。
https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns

lvmkulzt

lvmkulzt3#

根据React Router文档,proptype 'path'的类型为字符串。因此,您无法将数组作为属性传递给路由组件。
如果您的目的只是改变路线,您可以将相同的组件用于不同的路线,没有问题

v7pvogib

v7pvogib4#

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

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];
  }, []);
iaqfqrcu

iaqfqrcu5#

从react-router v4.4.0-beta.4开始,以及在v5.0.0中的正式版本,您现在可以指定解析到组件的路径数组,例如

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

数组中的每个路径都是正则表达式字符串。
此方法的文档可在here中找到。

React路由器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>
  );

您可以看到此代码在here上工作的扩展示例。
这个答案的关键在于:
useRoutes钩子在功能上等同于<Routes>,但它使用JavaScript对象而不是<Route>元素来定义路由。

ohtdti5x

ohtdti5x6#

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

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

正如你所看到的,它有点冗长,所以如果你的component/route像这样简单,它可能不值得。
当然,如果经常出现这种情况,你可以创建一个 Package 组件,它接受一个数组paths参数,它可重用地执行regex或.map逻辑。

esyap4oy

esyap4oy7#

我不认为这是如果你使用的版本的React路由器低于v4。
您可以像使用任何其他JSX组件一样使用map

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

编辑

只要path-to-regexp支持路径in react-router v4,你也可以用正则表达式来表示路径in react-router v4

fae0ux8s

fae0ux8s8#

从react router v6开始,他们删除了regex选项,根据类型定义,它仍然是path: string。目前,你必须重新拼写每个路径,或者使用map来方便:

<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

fnvucqvd

fnvucqvd9#

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

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

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

相关问题