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。

对其他路线做出其他反应

1 个答案: