shouldComponentUpdate () возвращает true, но NavLink по-прежнему не работает

Question

Я недавно пытался реализовать navlink следующим образом:

import React from 'react';
import { Link, NavLink } from 'react-router-dom';

import '../css/navbar.css';
import logoWhite from '../../common/images';

const Navbar = props => {
    return (
        <div id="navbar" className="grid">
            <Link to="/" className="column logo-container">
                <img src={logoWhite} alt="Test logo" />
            </Link>

            <ul className="column navigation">
                <li>
                    <NavLink to="/" exact className="nav-link" activeClassName="active">Home</NavLink>
                </li>

                <li>
                    <NavLink to="/match" className="nav-link" activeClassName="active">Partner Proposals</NavLink>
                </li>
            </ul>
        </div>
    );
};

export default Navbar;

После запуска я столкнулся с проблемой того, что имя класса не передается по ссылке, когда маршрут изменился. Чтение статей и это заставило меня заподозрить, что метод shouldComponentUpdate обрабатывается false. Итак, я переписал Navbar так:

import React from 'react';
import { Link, NavLink } from 'react-router-dom';

import '../css/navbar.css';
import logoWhite from '../../common/images';

class Navbar extends React.Component {
    shouldComponentUpdate() {
        console.log('Console log activated');
        return true;
    }

    render() {
        return (
            <div id="navbar" className="grid">
                <Link to="/" className="column logo-container">
                    <img src={logoWhite} alt="Test image" />
                </Link>

                <ul className="column navigation">
                    <li>
                        <NavLink to="/" exact activeClassName="active" className="nav-link">Home</NavLink>
                    </li>

                    <li>
                        <NavLink to="/match" activeClassName="active" className="nav-link">Partner Proposals</NavLink>
                    </li>
                </ul>
            </div>
        );
    }
}

export default Navbar;

Странно, что componentDidUpdate вернул значение в консоли (предполагая, что оно вернуло true), но NavLink все еще не передавал activeClassName

Может кто-нибудь предложить решение этой проблемы?

Answer 1

Основываясь на предложении @mindaJalaj, я передал pathname реквизит (который выполнял рендеринг и повторный рендеринг всякий раз, когда происходило обновление маршрута от родительского компонента), и я реализовал Navbar следующим образом

import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';
import { Icon } from 'semantic-ui-react';

import '../css/navbar.css';
import logo from '../../common/images/logo.png';
import navLinks from '../navLinks';

const Navbar = props => {
    function renderNavLinks() {
        return navLinks.map((navLink, index) => {
            const key: string = `nav-link-${navLink.path}-${index}`;
            const exact: boolean = navLink.exact || false;

            return (
                <li key={key}>
                    <NavLink
                        to={navLink.path}
                        exact={exact}
                        className="nav-link"
                        isActive={() => navLink.path === props.pathname}
                        activeClassName="active"
                    >
                        <Icon name={navLink.icon} />
                        <span>{navLink.title}</span>
                    </NavLink>
                </li>
            );
        });
    }

    return (
        <div id="navbar" className="grid">
            <Link to="/" className="column logo-container">
                <img src={logo} alt="Test logo" />
            </Link>

            <ul className="column navigation">{renderNavLinks()}</ul>
        </div>
    );
};

Navbar.propTypes = {
    pathname: PropTypes.string
};

Navbar.defaultProps = {
    pathname: '/'
};

export default Navbar;