React Router NavLink не отображает activeClassName при отображении

Question

activeClassName React Routers NavLink не работает при отображении, как показано в следующем коде. Представление получает ссылки из своего контейнера в качестве реквизита, в котором они отображаются. Все работает хорошо, включая стандартный 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;

React-router довольно специфичен и требователен к сопоставлению шаблонов URL. Если ваш маршрут /home, <NavLink/> будет совпадать только тогда, когда реквизит to также /home, не home.