链接到动态活动类？

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> 

错误：通过使用这种方法在你点击将会登陆在同一页上始终标签。

谢谢。