Получить активный маршрут с реактивным маршрутизатором в ReactJs

Я создаю проект, используя responsejs.In мое приложение я получаю активный маршрут, используя это:

this.context.router.isActive

но получая undefined, я использую агент-маршрутизатор 4.Earlier это работало для меня, когда я использую более низкую версию реактивного маршрутизатора. Вот мой код:

class NavLink extends React.Component {

    render() {


     console.log( this.context.router.isActive)
          let isActive = this.context.router.isActive(this.props.to, true);
           let className = isActive ? "active" : "";
        return(
            <li  className={className} {...this.props}>
               <Link {...this.props}/>
            </li >
        );
    }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

Ответы

Ответ 1

Архитектура изменилась в response-router v4, а this.context.router.isActive больше не поддерживается.

В response-router-v4 вы можете вместо использования NavLink использовать открытый NavLink компонент.

Из документации:

NavLink

Специальная версия, которая добавит атрибуты стиля в отображаемый элемент, когда он соответствует текущему URL-адресу.

import { NavLink } from 'react-router-dom'

<NavLink to="/about">About</NavLink>

Он также предоставляет вам поддержку activeClassName:

activeClassName: строка

Класс, задающий элемент, когда он активен. Значение по умолчанию класс активен. Это будет объединено с именем className.

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

Почему this.context.router.isActive не поддерживается:

Вот выдержка из github проблема

Рендеринг <Route> не обязательно означает "только рендеринг при совпадении текущего местоположения". Например, его можно использовать, вставляя переменные маршрутизатора из контекста в компонент в качестве реквизита.

В <NavLink>, <Route> использует дочернюю опору, что означает, что она вызовет функцию children, соответствует ли маршрут. Если совпадение равно NULL, то мы знаем, что оно не соответствует.

Если вы предпочитаете не использовать <Route children> таким образом, React Router предлагает императивный подход с функцией matchPath. Это то, что <Switch>es и <Route>s используют внутренне для сопоставления местоположения с контуром.

Если ваш компонент не получает реквизиты Router, вы можете ввести его с помощью withRouter HOC

import { withRouter } from 'react-router';

export class withRouter(MyComponent);