React-Router v4：确切的语句不会将 active class 添加到导航项

Question

我正在恢复一个旧项目，我被迫更新所有库。所以在更新中我遇到了一些额外的问题 - 现在工作的东西已经停止工作了。

其中一个问题是导航中的 active class/state。早些时候 active class 被添加为向下滚动网站到适当的部分，现在它被忽略了。图书馆中可能发生了某些变化。

此导航栏代码很复杂，但创建它是为了维护多语言支持并可在 i18next 库的帮助下进行翻译。

React router and router-dom is 4.3.1

所以，这里是：

Navigation.js

import React from 'react';
import ReactDOM from 'react-dom';
import Nav from './houses/Nav.js';

var navbar = {};
navbar.brand = { linkTo: "#hero", text: "WEB sprendimai" };
navbar.links = [
  { linkTo: "#", event: "lt", spanClassName: "flag-icon flag-icon-lt" },
  { linkTo: "#", event: "en", spanClassName: "flag-icon flag-icon-gb" },
  { linkTo: "#about", text: "About", spanClassName: "btnicon icon-user" },
  { linkTo: "#services", text: "Servives", spanClassName: "btnicon icon-cup" },
  { linkTo: "#contacts", text: "Kontaktai", spanClassName: "btnicon icon-envelope-open" }
];

class Navigation extends React.Component {

  render() {
    return (
      <header>
        <div className="container">
          <Nav {...navbar} />
        </div>
      </header>
    )
  }
}

module.exports = Navigation;

和Nav.js

import { withTranslation } from 'react-i18next';
import { NavLink } from 'react-router-dom';

class Nav extends React.Component {

  render() {
    const { t } = this.props;
    return (
      <nav className="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom py-1" role="navigation">
        <div className="container">
        <NavBrand linkTo={this.props.brand.linkTo} text={t(this.props.brand.text)} />
            <button type="button" className="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbarSupportedContent" aria-label={t('Perjungti navigaciją')}>
              <span className="sr-only">{t('Perjungti navigaciją')}</span>
              <span className="navbar-toggler-icon"></span>
            </button>            
          <div className="collapse navbar-collapse">
            <NavMenuExt links={this.props.links} />
          </div>
        </div>
      </nav>
    );
  }
};

class NavBrand extends React.Component {
  render() {
    return (
      <a className="navbar-brand" alt="back to home" href={this.props.linkTo}>{this.props.text}
        <span className="brandicon"></span>
        <span className="brandname">&lt;&nbsp;K&nbsp;&gt;</span>
      </a>
    );
  }
};

class NavMenu extends React.Component {
  render() {
    const { t } = this.props;
    var links = this.props.links.map(function (link, index) {
      return (
        <NavLinkExtCreator key={index} linkTo={link.linkTo} text={t(link.text)} active={link.active} event={link.event} spanClassName={link.spanClassName} />
      );

    });
    return (
      <ul className="navbar-nav mr-auto">
        {links}
      </ul>
    );
  }
};

class NavLinkCreator extends React.Component {

  render() {
    const { i18n } = this.props;
    const toggle = lng => i18n.changeLanguage(lng);
        
console.log(this.props.event);
    if (this.props.event) {

      return (
        <li className="nav-item"><NavLink className="nav-link" onClick={() => toggle(this.props.event)} to={'/' + this.props.event}><span className={(this.props.spanClassName)}></span></NavLink></li>
      )
    }

    return (
      <li className="nav-item"><NavLink className="nav-link" to={this.props.linkTo} exact activeClassName="active">{this.props.text}<span className={(this.props.spanClassName)}></span></NavLink></li>
    );
  }
};

const NavExt = withTranslation()(Nav);
const NavMenuExt = withTranslation()(NavMenu);
const NavLinkExtCreator = withTranslation()(NavLinkCreator);

export {
  NavMenuExt,
  NavLinkExtCreator
}

export default NavExt;

有人可以帮我解决吗？

Answer 1

嗯，好像是4.3.1版本的bug。我不得不将 react-router-dom 降级到 4.2.2

React-Router v4：确切的语句不会将 active class 添加到导航项

React-Router v4: exact statement doesn't add active class to navigation item

reactjs

react-router

react-router-v4