React router activeClassName doesnt set active class for child routes

Question

<ul className="right hide-on-med-and-down">
  <li><IndexLink to="/" activeClassName="active">ABOUT</IndexLink></li>
  <li><Link to="blog" activeClassName="active">BLOG</Link></li>
  <li><Link to="discover" activeClassName="active">DISCOVER</Link></li>
  <li><Link to="contact" activeClassName="active">CONTACT</Link></li>
 </ul>

this is how my navigation looks like, and when i navigate to /blog, Blog is active. but when i navigate to /blog/my-blog-post, the active class disappears, is there a way to make /blog/my-blog-post set the active class on my blog list item?

Answer 1

<Route path="blog" component={Blog}>
  <Route path=":slug" component={Blog}></Route>
</Route>

I just had to declare my routes as above and it worked! This link was helpful: https://github.com/reactjs/react-router/issues/1684