I am currently working with the following structure:
App Component:
<div className="App">
<Header></Header>
<Container></Container>
<Footer></Footer>
</div>
Container Component:
<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>
I am trying to dynamically change the colors of the Header, Footer, and certain elements in components like Dash, Prof, Rep based on the current path. For example, I want the Header, Footer, and bottom border to be 'red' when Dash is active or 'blue' when Rep is active. I have successfully implemented this for the bottom border, but I am struggling to figure out how to pass this information, such as a CSS class name, to the Footer and Header components.