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

我将相同的组件用于三种不同的路线:

<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>
Tony飞云2020/03/12 16:23:48

根据React Router docs,属性类型“ path”的类型为字符串。因此,您无法将数组作为属性传递给路由组件。

如果您只想更改路线,则可以将同一组件用于不同的路线,这没有问题

达蒙Jim斯丁2020/03/12 16:23:48

我不认为您使用的是低于v4的React Router版本。

不过,您可以map像对待其他任何JSX组件一样使用a

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

编辑

您也可以在react-router v4中使用正则表达式作为路径只要path-to-regexp支持即可有关更多信息,请参见@Cameron的答案。

逆天乐2020/03/12 16:23:48

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

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

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

可以在这里找到有关此方法的文档

西里小哥2020/03/12 16:23:48

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

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

然后在Home组件内部以详细方式解决它

<Router>
  <Route path="/pages/" component={Home} />
</Router>
Tony樱番长2020/03/12 16:23:48

从react-route-dom v5.1.2开始,您可以通过以下多个路径

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

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

梅十三2020/03/12 16:23:48

至少对于react-router v4来说,它path可以是正则表达式字符串,因此您可以执行以下操作:

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

如您所见,它有点冗长,因此,如果您的component/ route像这样简单,则可能不值得。

And of course if this actually comes up often you could always create a wrapping component that takes in an array paths parameter, which does the regex or .map logic reusably.