多路徑名稱陣營路由器

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邏輯。