React router не применяет активный класс NavLink, если у компонента есть mapStateToProps

Question

Я использую react-router с NavLink, потому что я хочу установить стиль для активной ссылки.Это компонент меню:

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

export default class Menu extends React.Component{
render(){
    return (
        <nav>
            <NavLink className="nav-link" to="/"
                activeClassName="active" exact={true}>Home</NavLink>

            <NavLink className="nav-link to="/messages"
                activeClassName="active" exact={true}>Messages</NavLink>

Компонент меню включен в другой компонент Header, который использует mapStateToProps:

....
    return(
        <div>
            ....
            <Menu />
        </div>
....

function mapStateToProps(state) {
    return  {....}
}
export default connect(mapStateToProps)(Header);

И у меня есть RouterApp, где включеныHeader и PageComponents:

....
const store = configureStore();


const AppRouter = ({store}) => (
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Header/>
                <Switch>
                    <Route path="/" component={HomePage} exact={true} />
                    <Route path="/messages" component={MessagesPage} exact={true} />
                    <Route component={NotFoundPage} />
                </Switch>
           </div>
       </BrowserRouter>
   </Provider>
);

Когда я получаю доступ к корневому маршруту в браузере, домашняя ссылка имеет класс active, а компонент - HomePage.

Если я нажимаюв ссылке на сообщения отображается правильный компонент - MessagesPage, но домашняя ссылка остается с activeClass и NavLink, если сообщения не с ней.

Если я удаляю mapStateToProps из Header компонента, все работает нормально, но с ним активный класс не применяется к текущей ссылке.

Answer 1

Визуализация компонента Header по умолчанию Route или использование withRouter HOC, и компоненты Navlink будут работать правильно

<Route component={Header}/>

или

export default withRouter(connect(mapStateToProps)(Header));