鏈接到動態活動類？

Question

在我的反應應用程序中用於路由目的的路由器。

礦路由在給定的方式定義：

<Route path={food/:cuisine/:pageNo} component={foodList} 

和我的導航欄有如下導航：

<Link to={"/food/italian/1"} activeClassName="active">Italian</Link> 
<Link to={"/food/indian/1"} activeClassName="active">Indian</Link> 

但是當訪問網頁沒有。 2（「/ food/indian/2」），那麼myActive類的navBar不會顯示。 如果有任何其他方法來解決這個問題，那麼它會很好。

謝謝。

---

PS：我不想把所有的條件一樣，因爲該應用程序已超過15個不同的菜餚

if(this.props.params.cuisine=="Indian){ 
    //then add .active in my Link to class 
} 

=======

Answer 1

只是使用條件的javascript給定的情況。

喜歡：

if(this.props.params.cuisine=="Indian){ 
    //then add .active in my Link to class 
} 

將完全爲你工作。 activeClass將比較整個路線路徑，如果它是真的，那麼他們將添加活動類。

替代選項：如果你可以使用splice函數創建一個常量值來獲得ur的後綴url。

然後創建兩個變量。

例如：

var indianPrefix= "/food/indian/"+ urlSuffix; 
var italianPrefix= "/food/italian/"+ urlSuffix; 

然後使用：

<Link to={italianPrefix} activeClassName="active">Italian</Link> 
<Link to={indianPrefix} activeClassName="active">Indian</Link> 

錯誤：通過使用這種方法在你點擊將會登陸在同一頁上始終標籤。

謝謝。