archakov06
@archakov06
Frontend-разработчик (ReactJS)

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

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

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

Имеется раздел с аккаунтами. Если перейти на основной роут, откраывается разедл аккаунтов как если перейти на раздел /accounts
  • Вопрос задан
  • 688 просмотров
Решения вопроса 2
@vaskadogana
Frontend developer
я так делаю,
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
Ответ написан
Комментировать
archakov06
@archakov06 Автор вопроса
Frontend-разработчик (ReactJS)
<NavLink isActive={(_, location) => location.pathname == '/' || location.pathname == '/accounts'} to='/accounts' activeClassName="active" className="header-right__item">


Достаточно было почитать документацию. <NavLink> принимает функцию <b>isActive</b>.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы