根据路线改变导航栏颜色

在我的导航栏组件中,我使用react redux的HOC(connect)和react router的withRouter从我的redux存储中获取路由属性和信息。

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

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

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`}>

这是我的根应用程序组件。

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' },

主页上的颜色是蓝色的,除非我刷新,否则它仍然是蓝色的。当我刷新时,它会重新呈现,导航栏也会得到正确的颜色。