shouldComponentUpdate() 返回 true 但 NavLink 仍然不起作用答案

【问题标题】：shouldComponentUpdate() returns true but NavLink still doesn't workshouldComponentUpdate() 返回 true 但 NavLink 仍然不起作用
【发布时间】：2018-10-10 16:45:07
【问题描述】：

我最近尝试像这样实现导航链接：

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

谁能提出解决这个问题的方法？

【问题讨论】：

澄清一下，您在问为什么当路由处于活动状态时没有应用activeClassName 中指定的类，对吗？为了确保，您知道您的第二个 sn-p 实际上并没有使用activeClassName，对吧？
指定的类没有被应用；是的，这就是我问的问题。但是我在第二个 sn-p 中打错了
尝试 isActive()，在给定的链接中显示并测试发生了什么 - github.com/ReactTraining/react-router/blob/master/packages/…
您可以将“active”类名更改为“is_active”或其他名称，并设置类名的样式（例如：font-weight: bold）。

标签： reactjs ecmascript-6 react-router jsx react-router-v4

【解决方案1】：

根据@mindaJalaj 的建议，我传递了一个pathname 道具（每当父组件对路由进行更新时，它都会进行渲染和重新渲染），并按如下方式实现了导航栏

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;

【讨论】：