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>
第1123篇《React Router中同一组件的多个路径名》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
我不认为您使用的是低于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的答案。
从react-router v4.4.0-beta.4开始，并且正式在v5.0.0中，您现在可以指定解析为组件的路径数组，例如
<Router>
<Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>
数组中的每个路径都是一个正则表达式字符串。
可以在这里找到有关此方法的文档。
其他选项：使用路由前缀。/pages例如。你会得到
/pages/home/pages/users/pages/widgets然后在Home组件内部以详细方式解决它。
<Router>
<Route path="/pages/" component={Home} />
</Router>
从react-route-dom v5.1.2开始，您可以通过以下多个路径
<Route path={"/home" | "/users" | "/widgets"} component={Home} />
很显然，您需要在顶部导入Home jsx文件。
至少对于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.
相似问题
问题类别
根据React Router docs，属性类型“ path”的类型为字符串。因此，您无法将数组作为属性传递给路由组件。
如果您只想更改路线，则可以将同一组件用于不同的路线，这没有问题