Berufung Reagieren Router von Vanille JS

Question

Ich habe eine reagieren einzelne Seite Anwendung Router mit Reagieren und Pfade Link-definierten verwenden, wie unten dargestellt:

<Link to="second" className="level-2" params={{id:item.content}} title={item.name}>{item.name}<br/></Link> 

Dies ändert url von/myapp/firsturi zu/myapp/seconduri

Ist es mir möglich, die gleiche Reaktion Router-Aktion mit Vanille JS zu machen? Ich habe versucht, mit history.pushState() und history.replaceState(), aber während die URL korrekt aktualisiert, der Inhalt auf der Seite nicht. Ich kann dasselbe mit window.location.href = "/ myapp/seconduri" bekommen, aber das verursacht eine Seitenaktualisierung, die nicht das ist, was ich will.

Irgendeine Idee, wie man das macht?

Answer 1

React Router verwendet das Modul history, um Positionen zu verwalten. Wenn die Seite geladen wird, wird die anfängliche URL analysiert, weshalb die Einstellung window.location.href funktioniert.

Der Verlauf, den Sie verwenden, enthält eine listen-Funktion, die React Router verwendet, um nach Standortänderungen zu überwachen. Wenn einer auftritt, löst dies einen erneuten Abgleich des neuen Standorts mit Ihren Routen aus, wodurch wiederum die richtigen Komponenten wiedergegeben werden.

Manuell aufrufen pushState/replaceState löst die Abhörfunktion nicht aus, weshalb Ihre App nicht aktualisiert werden kann. Stattdessen sollten Sie Ihre Verlaufsinstanz zu navigate verwenden.