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