For example, there are 3 routes.

  1. level - left menu item - chose shop (shop).
  2. level - where product id is searched
  3. level - where we sold the product with this id

The URL is http: // localhost: 3000 / shop / 521 / sell

1st router such

<NavLink exact activeClassName="active" to={m.path}> {m.title} </NavLink>

2 router

 <li key={w.id}> <NavLink exact activeClassName="active-2" to= {`${props.match.url}/${w.id}`}>{w.product} </NavLink>

When clicking on item 1 of the nesting level, the active class is set in the left menu. However, if we click further on the links of the route in the 2nd and 3rd nesting levels, then the active class disappears from the 1st level. And put active-2 where we click. And I need each link level to have the current selection. That is, level 1 links would have active class for active, and level 2 links would have active-2 class.

How to do it correctly, so as not to parse the url string and not look for matches there. That is, is there any native behavior in the reactor itself?

    0