Link 到动态活动 class？

Question

我的 React 应用程序中用于路由目的的路由器。

矿井路由以给定方式定义：

<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 class 未显示。如果有任何替代方法可以解决这个问题，那就太好了。

谢谢。

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 将比较整个路由路径，如果是，则他们将添加 class active.

备用选项：如果您可以使用 javascript 的 splice 函数创建常量值来获取 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>

错误：通过使用此方法单击选项卡，您将始终登陆同一页面。

谢谢。

Link to dynamic active class?