My homepage has three main links - Lists, About, and History. I want the Lists link to be active when I'm on the details and photos screens. How can I set this specific link as active?
Below is my router code,
<Router history={hashHistory}>
<Route path="/">
<IndexRedirect to="home/lists" />
<Route path="home" component={Home}>
<Route path="lists" component={Lists} />
<Route path="details" component={Details} />
<Route path="photos" component={Photos} />
<Route path="about" component={About} />
<Route path="history" component={History} />
</Route>
</Route>
</Route>
Menu component,
<li><Link to="home/lists" activeClassName="active">Lists</Link></li>
<li><Link to="home/about" activeClassName="active">About</Link></li>
<li><Link to="home/history" activeClassName="active">History</Link></li>
I need the Lists link to always be active when I'm on the details and photos screens. Can someone please help me resolve this issue? I've been struggling for the past 3 hours trying to fix it.