React Router 4: Как поставить activleClassName для двух ссылок?

Question

[Archakov Dennis]

Подскажите, как сделать так, чтобы activeClassName, ставился одной ссылки, в зависимости от роута?

Если перейти на основной раздел - / или на /accounts, устанавливался класс для одного <NavLink>

Имеется раздел с аккаунтами. Если перейти на основной роут, откраывается разедл аккаунтов как если перейти на раздел /accounts

Answer 1

[vaskadogana]

я так делаю,

import React from "react";
import { Link }  from 'react-router-dom'

export default class NavLink extends React.Component{
  constructor(props) {
  	super(props);

  }

  render() {
  	let activeStyle;
  	let url = window.location.hash;
  	url = url.replace('#/','/')
  	if (url == this.props.to){
  		activeStyle = { opacity: 0.5 }
  	}
    return <Link {...this.props} style={activeStyle} />
  }
};

в 'react-router' есть свойство по умолчанию: activeStyle

Answer 2

[Archakov Dennis]

<NavLink isActive={(_, location) => location.pathname == '/' || location.pathname == '/accounts'} to='/accounts' activeClassName="active" className="header-right__item">

Достаточно было почитать документацию. <NavLink> принимает функцию <b>isActive</b>.