链接到动态活动类？答案

【问题标题】：Link to dynamic active class?链接到动态活动类？
【发布时间】：2017-05-16 15:07:44
【问题描述】：

在我的反应应用中用于路由目的的路由器。

我的路由以给定的方式定义：

<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
}

=======

【问题讨论】：

尝试使用 ClassName 而不是 activeClassName。
@Jean-maxime Bouloc 如果你知道答案，那么你可以编辑这个问题。放置一个空格或删除一个额外的空格并不能解决这个问题。如果你想获得太多的声誉，那就开始提出问题，而不是在 if 条件下多加一个空格。
您是否尝试过使用activeStyle？ here
@AmitJamwal ，我已经提到我不想在 className 中使用该变量方法。会有15种不同的美食，我要写15种不同的变量className，并在this.props.params.cuisine的基础上给出条件
我认为路线有问题。我可以看看你的路线配置吗？

【解决方案1】：

只对给定的情况使用条件 javascript。

喜欢：

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

它将完美地为您服务。 activeClass 将比较整个路由路径，如果为真，那么他们将添加活动类。

备用选项：如果你可以使用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>

错误：通过在单击标签时使用此方法，您将始终登陆同一页面。

谢谢。

【讨论】：