Reactjs 映射时，React Router NavLink不呈现activeClassName

如下代码所示映射时，React Routers NavLink的activeClassName不起作用。视图将链接作为道具从其容器接收，并在其中进行映射。一切都很好，包括标准类名，但activeClassName不起作用。当我在映射之外手动添加导航链接时，它可以工作，但我找不到错误。谢谢你的帮助

import React from "react";
import { NavLink } from "react-router-dom";
import styles from './style.scss';

class NavView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
      return (
          <ul>
            {this.props.links.map(function(link, index) {
              return <li key={index}> <NavLink to={link.slug} className="navLink" activeClassName="current" >{link.slug}</NavLink></li>
            })}
          </ul>
      );
  }
}
export default NavView

从“React”导入React；
从“react router dom”导入{NavLink}；
从“/style.scss”导入样式；
类NavView扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{this.props.links.map（函数（链接，索引）{
return
{link.slug}
})}

);
}
}
导出默认导航视图

我非常确定，您只需在路由链接段塞的开头添加一个斜杠即可

import React from "react";
import { NavLink } from "react-router-dom";
import styles from './style.scss';

class NavView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
      return (
          <ul>
            {this.props.links.map(function(link, index) {
              return <li key={index}> <NavLink to={`/${link.slug}`} className="navLink" activeClassName="current" >{link.slug}</NavLink></li>
            })}
          </ul>
      );
  }
}
export default NavView;

从“React”导入React；
从“react router dom”导入{NavLink}；
从“/style.scss”导入样式；
类NavView扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{this.props.links.map（函数（链接，索引）{
return
{link.slug}
})}

);
}
}
导出默认导航视图；

---

React路由器在匹配URL模式方面非常具体和挑剔。如果您的路线是

/home

，

将只在

至
道具也是
/home
时匹配，而不是
至
/home
此.props.links
中的数据是什么样的？
到
道具与当前URL的模式匹配可能已关闭。这是一个JSON字符串数组。链接：数组（4）0:{title:“Home”，id:“Home”，uid:“Home”，slug:“Home”，parent:null，}尝试将前面的
/
添加到slug中，使其成为例如
/Home
。另外，请确保在路径匹配中正确考虑了任何嵌套管线<代码>https://example.com/#/home
将匹配
/home
但
https://example.com/#/foo/home
不会。谢谢jered。
/
已经在中，这就是devtools显示的内容
到目前为止，我还没有嵌套路由，路由本身似乎可以工作。请仔细检查实际React prop的实际值是否包括斜杠，而不仅仅是锚定标记DOM元素的
href
属性。您可以使用Chrome React Developer工具检查React组件层次结构。这值得竖起100个大拇指！简单的错误，但很难抓住。在这上面浪费了大约一个小时。非常感谢。