I'm currently working on a React and react-router application that uses 2 nested routes to create a total of 3 routes: /, /about, /contact. When I click on the Links to navigate to each route, the tab on my navigation bar - which is located in the parent route - changes its style to show it's active using some Bootstrap magic. However, the issue arises when I visit /about or /contact, as the nav tab does not remain active. Since I am new to React, I assume that I need to bind the style attribute to a condition that checks the property of the route, props, or state of the component. Nevertheless, I'm uncertain about how to go about doing this and would greatly appreciate any help.
Here is the simplified layout where the nav is:
export default class Layout extends React.Component {
render() {
return (
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
)}}
In the < li > part, I believe I need something like class={if this.props.children == About, class=active, class=""}
The code for rendering the routes:
render((
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</Route>
</Router>
), document.getElementById('app'))
Therefore, as mentioned above, the li element needs to check if the Layout's props.children are null, or if they are equal to About or Contact. I'm really unsure about how to compare the value of this.props.children if it's a React component.
Any assistance provided in advance will be highly appreciated!