css - 为不同的路线 react 其他颜色

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、Prof、Rep)中的一些元素。例如，我希望在 Dash 处于事件状态时将页眉、页脚和底部边框设置为“红色”，或者在 Rep 处于事件状态时将其设置为“蓝色”。我已经为底部边框做了它，但我有问题如何为页脚和页眉传递此信息(例如 css 类名)。

Answer 1

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