单击不同的链接时，react-router NavLink链接元素className不会更改“处于活动”状态

Question

当我单击其中的任何NavLink时，似乎没有重新渲染Header组件。对于我首先加载的任何页面（例如mysite.com/about），发生的情况是该页面的链接在标题中以粗体显示，并且其相应的<a>元素正确标记为“处于活动状态”-但是，当我单击任何在要浏览到其他页面的其他链接中，第一个链接保持为粗体，并且其相应的<a>元素仍标记为“处于活动状态”。有什么想法吗？这是我的Header组件代码：

import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';

class Header extends React.Component {
    renderLinks() {
        if (this.props.authenticated) {
            return (
                <div>
                    <NavLink className="header__navbar" to="/create" activeClassName="is-active">Create Note</NavLink>
                </div>                
            );
        } else {
            return (
                <div>
                    <NavLink className="header__navbar" to="/signup" activeClassName="is-active">Sign Up</NavLink>
                    <NavLink className="header__navbar" to="/signin" activeClassName="is-active">Sign In</NavLink>
                </div>
            );
        }
    }

    render() {
        return (
            <header className="header">
                <div className="container">
                    <h1 className="header__title">{this.props.title}</h1>
                    <div className="header__navbargroup">
                        <div>
                            <NavLink className="header__navbar" to="/" activeClassName="is-active" exact={true}>Main</NavLink>
                            <NavLink className="header__navbar" to="/about" activeClassName="is-active">About</NavLink>
                        </div>
                        {this.renderLinks()}
                    </div>                    
                </div>
            </header>
        );
    }
}    

const mapStateToProps = (state) => {
    return {
        authenticated: state.auth.authenticated
    }
};

Header.defaultProps = {
    title: 'Notes App'
};

export default connect(mapStateToProps)(Header);