Navbar не перерисовывается при изменении местоположения маршрутизатора

Я хочу отобразить имя пользователя и изменить текст кнопки на «выход» с «вход» в Navbar (компонент навигации), когда пользователь вошел в систему. Я устал повторно отображать компонент навигации, переместив местоположение истории маршрутизатора на домашнюю страницу для пользователя, вошедшего в систему. в.

this.props.history.push('/')

Затем пользователь может успешно войти в систему, данные пользователя сохраняются в локальном хранилище, а местоположение маршрутизатора изменяется. данные сохраняются в localStorage, но компонент не перерисовывается.

Вот что я пробовал.

1. попытался понизить версию «connected-react-router» до «v6.0.0», но это выдало мне несколько ошибок. поэтому верните последнюю версию «^ 6.4.0».

2. попытался добавить код Navbar в App.js, который является родительским компонентом. Но сам app.js не перерисовывается ни для пользователя, вошедшего в систему.

app.js

import React from 'react';
import { connect } from 'react-redux';
/* --- Components --- */
import Nav from './src/components/nav';
import Loader from './src/shared/loader';
import './styles/main.scss';

const FlashMessagesContainer = Loader({
  loader: () =>
    import('./src/shared/flassMessagesContainer' /* webpackChunkName: 'FlashMessagesContainer' */),
});

const App = (props, { isOnModal }) => (
  <div id = "app">
    <Nav />
    {!isOnModal && (
      <div className = "flex justify-center">
        <FlashMessagesContainer />
      </div>
    )}
    {props.children}
  </div>
);

const mapPropsToState = state => ({
  isOnModal: state.modal.show,
});

export default connect(
  mapPropsToState,
  null,
)(App);

nav.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';

/* --- Components --- */
import {
  isLoggedIn,
  getCompanyName,
  clearLocalStorage,
} from '../../localStorage';

class Nav extends Component {

  handleUserLogout = async ev => {
    ev.preventDefault();
    await clearLocalStorage();
    return this.props.history.push('/login');
  };

  render() {
    return (
      <div className = "nav">  
          {isLoggedIn() ? (
            <div className = "flex">
              <p className = "mr3 mt2">
                안녕하세요. <span className = "b">{getCompanyName()}</span>
                &#8201;님,
              </p>
              <button
                type = "button"
                className = "login-btn td-none c-text br f-mini"
                onClick = {this.handleUserLogout}
              >
                로그아웃
              </button>
            </div>
          ) : (
            <Link className = "login-btn td-none c-text br f-mini" to = "/login">
              로그인
            </Link>
          )}
      </div>
    );
  }
}

export default withRouter(Nav);

localStorage.js

export const getToken = () => localStorage.token;
export const getCompanyName = () => localStorage.companyName;
export const isLoggedIn = () => !!localStorage.token;
export const saveUserNameAndToken = userData => {
  localStorage.setItem('token', userData.token);
  localStorage.setItem('companyName', userData.companyName);
};
export const clearLocalStorage = () => localStorage.clear();

index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter as Router } from 'connected-react-router';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import configureStore, { history } from './store';
import Routes from './routes';

const theme = createMuiTheme({
 ...
});

const store = configureStore();
const root = document.createElement('div');
document.body.appendChild(root);

render(
  <Provider store = {store}>
    <MuiThemeProvider theme = {theme}>
      <Router history = {history}>
        <Routes />
      </Router>
    </MuiThemeProvider>
  </Provider>,
  root,
);

маршруты.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { hot, setConfig } from 'react-hot-loader';
import { withRouter } from 'react-router';
/* --- Components --- */
import App from './app';
import Loader from './src/shared/loader';

const Home = Loader({
  loader: () =>
    import('./src/components/home/homeContainer' /* webpackChunkName: 'Home' */),
});

...

const routes = props => (
  <div>
    <App history = {props.history} />
    <Switch>
      <Route exact path = "/" component = {Home} />
      <Route path = "/login" render = {props => <Login {...props} />} />
      <Route path = "/users/account" component = {Users} />
      <Route component = {NoMatch} />
    </Switch>
  </div>
);

const Routes =
  !module.hot || process.env.NODE_ENV === 'production'
    ? routes
    : hot(module)(routes);

export default withRouter(Routes);

Я ожидаю, что компонент Nav будет перерисован при изменении местоположения маршрутизатора.

react: ^16.8.6
react-dom: ^16.8.6
react-loadable: ^5.5.0
react-redux: ^6.0.0
react-router-dom: ^4.3.1
redux: ^4.0.0
connected-react-router: ^6.4.0