How to make ReactJs Menu Active Link?

Question

JavaScript

Good evening, there was such a situation, there is a router

<Router history={browserHistory}>
  <Route path="/" component={Root}>
    <IndexRoute component={Home}/>
    <Route path="projects" component={Projects} />
    <Route path="projects/one" component={ProjectsLevel} />
    <Route path="projects/two" component={ProjectIngrad} />
  </Route>
</Router>

and there is a navigation menu

<ul>
  <li>
   <Link to="/" className="menu__link" activeClassName="menu__link_active" onlyActiveOnIndex={true}>Главная</Link>
 </li>
  <li>
    <Link to="projects" className="menu__link" activeClassName="menu__link_active">Проекты</Link>
  </li>
</ul>

Links to the projects/one and project/two pages are on the projects page, so the actual question is how to make it so that when you go to the projects/one or projects/two route, an "active link" class is added to the projects menu item? These pages are separate full-fledged pages and cannot be nested in the projects component.

Answer 1

As far as I know, the router takes the route from historyApi/hashHistory.
Those. this should be enough.
Second. Why can't you invest? Separate page? AND???

<Route path="projects" component={Projects} >
    <Route path="one" component={ProjectsLevel} />
    <Route path="two" component={ProjectIngrad} />
</Route>

const Projects = ({ children }) => children || <div>Projects</div>

Answer 2

use NavLink instead of Link.
They have a default activeStyle property.

<NavLink activeStyle={{backgroundColor:"#353d46"}} className={style.link} to="/main/settings">