为不同的路线反应其他颜色

Question

我有这样的结构：

组件应用：

<div className="App">
<Header></Header>
<Container></Container>
<Footer></Footer>
</div>

组件容器：

<Router>
<div className="container">
<Switch>
<Route exact path="/" render={() => (<Redirect to="/dash"/>)}/>
<Route path="/dash"
       render={(props) => ( <Dash data={this.state.data} 
                                  match={props.match}/> )}/>
<Route path="/prof" component={Prof}/>
<Route path="/rep" component={Rep}/>
</Switch>
</div>
</Router>

我的问题是我希望根据当前路径具有不同颜色的页眉、页脚和组件（短划线、教授、代表）中的一些元素。例如，当 Dash 处于活动状态时，我希望页眉、页脚和底部边框为“红色”，或者当 Rep 处于活动状态时为“蓝色”。我已经为底部边框做了，但是我有问题如何为页脚和页眉传递这些信息（例如 css 类名）。

Answer 1

如果您使用react-router-redux，您可以获得商店中的当前路线。 在您的页眉页脚中，您可以根据当前路线更改 ClassName。