Uzyskaj aktywną trasę z reagują-router w ReactJs

Question

tworzę projekt korzystając reactjs.In mój wniosek Dostaję aktywną trasę przy użyciu to:

this.context.router.isActive 

ale coraz niezdefiniowany, używam react- router 4. Wcześniej to działało dla mnie, gdy używam niższej wersji routera reagowania. Oto mój kod:

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

Answer 1

architektura zmieniła się reagować-Router v4 i this.context.router.isActive nie jest już obsługiwany.

W systemie-router-v4 można zamiast tworzyć NavLinka samodzielnie użyć odsłoniętego komponentu NavLink.

From the documentation:

NavLink

Specjalna wersja z która doda stylizacji przypisuje renderowany elementu kiedy pasuje bieżący adres URL.

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

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

Zapewnia również możliwość rekwizyt activeClassName:

activeClassName: string

Klasa dać element, gdy jest aktywny. Domyślna klasa jest aktywna. Zostanie to połączone z podpisem className.

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

Dlaczego this.context.router.isActive nie obsługiwane:

Oto fragment z github emisyjnej

renderowania <Route> niekoniecznie oznacza „tylko renderuj, gdy dopasujesz bieżącą lokalizację ". Na przykład można go wykorzystać jako zmienne ruterowe z kontekstu na komponent jako rekwizyty.

W <NavLink>, <Route> używa rekwizytu dla dzieci, co oznacza, że ​​wywoła funkcję potomną niezależnie od tego, czy trasa się zgadza. Jeśli dopasowanie jest zerowe, wiemy, że nie pasuje.

Jeśli w ten sposób nie chcesz używać <Route children>, React Router oferuje tryb imperatywny z funkcją matchPath. To właśnie używa wewnętrznie do dopasowania lokalizacji względem ścieżki.

Jeśli urządzenie nie odbiera Router rekwizyty, a następnie można go wstrzyknąć za pomocą withRouter hoc

import { withRouter } from 'react-router'; 

export class withRouter(MyComponent);