Question

我是新来的反应者。我正在使用react-route-dom和。我想在路线更改时更改NavBar功能组件的颜色。

在我的NavBar组件中，我正在使用react-redux的HOC（连接）和react-router的withRouter从我的redux存储中获取路线道具和信息。

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

在documentation中，他们首先用redux然后用router包裹组件

我建议您更改：

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

对此：

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

根据路线反应更改导航栏颜色

1 个答案: