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>

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

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

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

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

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

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

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

当然，如果这种情况经常发生，您总是可以创建一个包含数组paths参数的包装组件，该组件可.map重复使用正则表达式或逻辑。

我不认为您使用的是低于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-route-dom v5.1.2开始，您可以通过以下多个路径

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

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

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

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

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

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

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

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

从react-router v4.4开始，您可以在下面执行以下操作。

将路径存储在变量中，然后向下传递并使用“ |” 操作员。

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

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

因此，对于所有匹配的路径，它将呈现component={Home}您需要的..