react-router链接高亮显示同级路由

Question

I have a route config similar to this:

<Route path="/">
  <Route component={Books} path="books" />
  <Route component={BookDetail} path="books/:bookId" />
</Route>

Is it possible to highlight a Link active that points to /books when /books/:bookId is active?

I know this can be achieved with making /books/:bookId a child of /books , however I'd like to avoid this as BookDetail actually replaces Books completely in the view.

My current solution is that BookDetail is a child of Books and Books has a condition to render either itself when exactly its route is active or otherwise its children. I'd like to avoid this if possible.

Answer 1

Not sure if I understand it well, but I don't have enough point to post comment. You can pass an extra parameter to

<Route path="/">
  <Route component={Books} path="books" />
  <Route component={BookDetail} path="books/:bookId" isDetail={true} />
</Route>