ダイナミックアクティブクラスにリンクしますか？

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は経路全体のパスを比較し、真の場合はクラスアクティブを追加します。

代替オプション：urはURLの末尾を取得するjavascriptのsplice関数を使用して定数値を作成できます。

次に、2つの変数を作成します。例えば

：

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

は、使用：

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

バグ：あなたは常に同じページに上陸されるタブをクリックする上で、この方法を使用することによりします。

ありがとうございました。