Question

按以下代码所示映射时，React Routers NavLink的activeClassName不起作用。该视图从其容器中接收链接，并将其作为props映射到其中。一切都可以正常工作，包括标准的className，但activeClassName不起作用。当我在映射外手动添加NavLink时，它可以工作，但是我找不到错误。任何帮助表示赞赏。

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

Answer 1

我敢肯定，您只需在路径的链接段的开头添加一个/斜线即可。

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;

反应路由器非常具体，对匹配的URL模式很挑剔。如果您的路线是/home，则只有当<NavLink/>道具也是to时，/home才会匹配，不是 home。

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

1 个答案: