Реагировать на изменение цвета панели навигации в зависимости от маршрута

Question

Я новичок, чтобы реагировать.Я использую React-Route-DOM и.Я хотел бы изменить цвет моего функционального компонента NavBar при изменении маршрута.

В моем компоненте NavBar я использую HOC (соединение) от response-redux и withRouter от Reaction-router, чтобы получить реквизиты маршрута иинформация из моего магазина редуксов.

const mapStateToProps = (state) => {
    return {
        moduleCards: state.moduleCards
    }
}

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

Вот фрагмент того, как я получаю информацию о маршруте, чтобы потом найти запись в moduleCard и получить ее цвет.

const NavBar = (props) => {
    console.log("Hello world?");
    const modules = props.moduleCards.find(c => `/${c.name.replace(/ /g,'')}` === props.location.pathname);
    const color = typeof modules !== 'undefined' ? modules.color : 'blue';
    return (
        <nav>
            <div className={`nav-wrapper ${color} darken-2`}>

Проблема в том, чтоцвет не меняется при смене маршрута.Не могли бы вы помочь с тем, как вызвать рендеринг на моем компоненте NavBar?Или, если есть лучший способ справиться с этим?

Вот мой корневой компонент приложения.

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <NavBar/>
          <Switch>
            <Route exact path='/' component={Home}/>
            <ModuleRoutes/>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

Вот снимок моего магазина, здесь я беру цветот.

const initialState = {
moduleCards: [
    { id: 0, name: 'Client Register', icon: 'person', color: 'red' },
    { id: 1, name: 'Property Register', icon: 'domain', color: 'blue' },

На домашней странице синий цвет, и если я не обновлю его, он останется синим.Когда я обновляю его, он перерисовывается, и навигационная панель получает правильный цвет.

Answer 1

В документации они оборачивают компонент сначала с redux, а затем с router

Я предлагаю вам изменить:

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

на это:

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