多路径名称阵营路由器

Question

我使用了三种不同的路线相同的组件：

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

Answer 1

我不要认为这是不幸的。

可以使用map，你会与任何其他JSX成分虽然做：

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

Answer 2

按

阵营路由器文档的proptype“路径”为字符串类型。所以也没有办法，你可以通过一个数组作为道具组件的道具。

如果你的意图是唯一改变路线，你可以使用相同的组件，用于不同的路线，没有任何问题与

Answer 3

至少在反应路由器V4的path可以是正则表达式字符串，这样你就可以做一些事情像这样：

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

正如你可以看到这是一个有点冗长，因此，如果您component/route简单这样它可能不值得。

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