Как сделать активную ссылку меню ReactJs?

Question

[stasov1]

Добрый вечер, возникла такая ситуация, есть роутер

<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>

и есть меню навигации

<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>

Ссылки на страницы projects/one и project/two находятся на странице projects, так вот собственно вопрос в том как сделать так чтобы когда переходишь по маршруту projects/one или projects/two добавлялся класс "активной ссылки" на пункт меню projects ? Эти страницы являются отдельными полноценными страницами и делать их вложенными в компонент projects нельзя.

Answer 1

[lemme]

Насколько я знаю - роутер берет маршрут с historyApi/hashHistory.
Т.е. этого должно хватать.
<Link to='projects/one'>One</Link>

Второе. Почему нельзя вкладывать? Отдельная страница? И???

<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

[ParaBellum577]

используй вместо Link NavLink.
У них есть свойство дефолтное activeStyle.

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