реагирующий маршрутизатор элемент ссылки NavLink className не меняет статус «is-active» при нажатии на разные ссылки - PullRequest
Новая
       14

реагирующий маршрутизатор элемент ссылки NavLink className не меняет статус «is-active» при нажатии на разные ссылки

0 голосов
/ 06 сентября 2018

Кажется, что мой компонент Header не перерисовывается, когда я щелкаю по любой из ссылок NavLink в нем. То, что происходит, для любой страницы, которую я загружаю первой (например, mysite.com/about), ссылка для этой страницы выделяется жирным шрифтом в заголовке, и соответствующий ей элемент <a> правильно помечается как «активный» - однако, когда я нажимаю на любую из другие ссылки для перехода на другие страницы, эта первая ссылка остается жирной, а соответствующий элемент <a> по-прежнему помечен как «is-active». Есть идеи почему? Вот мой код компонента заголовка: 

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);
...