In react-router v3 hatten wir activeStyle und activeClassName, um den aktiven Link
zu stylenwir könnten so etwas tun
%Vor%Ich möchte wissen, wie ich dasselbe in v4 machen kann?
Dieses Beispiel aus der benutzerdefinierten Link-Dokumentation des reactor-route v4 unterstützt Sie dabei:
%Vor%In Ihrem Fall könnten Sie folgende Komponente erstellen:
%Vor%Und dann benutze es wie:
%Vor% Alles funktioniert immer noch gleich. Read-router-dom v4 ersetzt jedoch Link durch NavLink
import { NavLink as Link } from 'react-router-dom'; ist auch in Ordnung. Hinweis: Navlinks sind standardmäßig aktiviert, sodass Sie a:active oder activeStyle={{color: 'red'}}
Wenn Sie auf ein Problem stoßen, bei dem das Nav-Menü funktioniert, außer dass es nicht ordnungsgemäß aktualisiert wird wenn Sie auf Links klicken und sich die Route ändert, aber es funktioniert, wenn Sie F5 drücken, können Sie dies tun:
Dies tritt wahrscheinlich auf, weil Sie Redux verwenden, das eine shouldComponentUpdate Lifecycle-Methode für die Funktion connect hat. Wahrscheinlich haben Sie Ihre Nav-Komponente in connect eingepackt. Das ist alles gut. shouldComponentUpdate ruiniert dein Leben.
Um es zu beheben, bringen Sie den Router einfach in Ihre mapStateToProps Funktion:
Wenn Sie nicht sicher sind, woher state.router kommt, kommt es aus der Datei, in der Sie Ihre Reduzierungen kombinieren, und Sie sehen etwa Folgendes:
Hier ist etwas HTML und CSS für einen hübschen Baller Nav Link:
%Vor%HTML
HINWEIS: Wenn Sie mit "/" verknüpfen, setzen Sie exact prop auf NavLink.
%Vor%CSS
Beachten Sie activeStyle im HTML-Markup. Nur so konnte ich die Farbe des Textes auf der aktiven Route / Verbindung ändern. Es hat nicht funktioniert, wenn ich color: teal; in die activeRoute CSS Klasse gesetzt habe. Öffnen Sie diese in einem anderen Tab: Ссылка
Wenn Sie nicht wissen, warum ich rem anstelle von px verwendet habe. Dies ist eine großartige Gelegenheit für Sie, die Webzugänglichkeit und die Basis font-size: 10px; zu erforschen.
Bleib fit und hab Spaß.
Tags und Links javascript reactjs react-router react-router-v4