React-Router: Wie aktualisiere ich die URL, ohne ein Navigieren/Neuladen zu verursachen?

Lesezeit: 3 Minuten

Mit React Router habe ich dies getan, um die URL zu aktualisieren:

this.props.history.push({
            pathname: `/product/${this.props.product.id}`,
        });

Dies führt jedoch zu einer erneuten Darstellung/Navigationsänderung. Gibt es eine Möglichkeit, die URL zu aktualisieren, ohne das zu tun?

Mein Anwendungsfall ist, dass ich eine Liste von Produkten habe und wenn ich auf eines klicke, zeige ich ein Modal und möchte die URL auf etwas wie example.com/product/1 aktualisieren, damit der Link geteilt werden kann.

Dies ist alles in React-Router integriert; es heißt dynamisches Routing

– Benutzer5734311

18. Juli 2019 um 20:06 Uhr
Ich glaube nicht, dass dies derzeit in React-Router v6 möglich ist, es gibt ein offenes Problem: github.com/remix-run/react-router/issues/8908

– Raumaustin

28. Juli 2022 um 19:13 Uhr

Konnte mit React Router keine Lösung finden, konnte dies jedoch über die Verlaufsschnittstelle des Browsers erreichen, indem Sie Folgendes aufrufen:

window.history.replaceState(null, "New Page Title", "/pathname/goes/here")

Sie können mehr darüber erfahren .replaceState Hier.

Routers reagieren history.replace wird nicht immer funktionieren

Routers reagieren history.replace -Methode kann abhängig von der Routeneinstellung Ihrer App ein erneutes Rendern auslösen oder nicht (z. B. wenn Sie eine Catch-All /* Route). Es verhindert ein Rendern per Definition nicht.

Beachten Sie, dass diese Änderung das Wissen des React Routers über den aktuellen Pfad umgehen könnte, wenn er später erneut geändert wird. Wenn Sie z. B. mit dieser Methode 1 Unterpfad anhängen und dann RR verwenden, um 1 Ebene nach oben zu navigieren, springt es visuell auf 2, da RR immer noch denkt, dass der Ort ohne den angehängten Unterpfad ist.

– Magnus Stier

26. Januar 2021 um 10:13 Uhr
Ich hatte genau das gleiche Problem wie das OP und habe es mit seinem Ansatz gelöst. Vielen Dank! @MagnusBull für den Browserverlauf verwende ich einfach window.history.pushState(stringify(currentParams), ""); und das scheint zu funktionieren, obwohl ich nicht auf das Unterpfadproblem gestoßen bin, von dem Sie gesprochen haben

– Sangeet Agarwal

15. März 2021 um 17:48 Uhr
@ usr28765526 Mein Punkt ist, dass, wenn Sie React Router verwenden, um die Navigation zu handhaben, dann die Browser-API verwenden replaceState kann als “Hack” betrachtet werden und RR wird nicht wissen, dass sich der Pfad geändert hat. Wenn Sie versuchen, React Router zu verwenden location Nachdem die URL geändert wurde, arbeitet es mit der Version der URL, die es kennt: Die vor der Änderung. Dies kann unvorhersehbar und verwirrend sein.

– Magnus Stier

16. März 2021 um 18:37 Uhr
So hilfreich, danke! Wusste nicht, dass history.replace Re-Renderings verursachen könnte

– Katie Fedoseeva

26. September 2022 um 23:50 Uhr

Engel Salazar

replace überschreibt die URL

this.props.history.replace({ pathname: `/product/${this.props.product.id}`})

Das führt definitiv immer noch dazu, dass der Router reagiert, und dann gibt es einen leeren Bildschirm (ich denke, er kann keine Route finden).

– seltsameQuirks

18. Juli 2019 um 20:15 Uhr
Ersetzen sollte eigentlich nur die URL überschreiben

– Engel Salazar

18. Juli 2019 um 20:22 Uhr
Ich habe das gefunden, was funktioniert: window.history.replaceState(null, null, /product/${this.props.product.id});

– seltsameQuirks

18. Juli 2019 um 20:23 Uhr
React-Router Replace sollte sich wie ReplaceState verhalten. Ich kann bestätigen, dass Ersetzen kein Rendern auslöst, sehen Sie sich diese kleine Demo an jsbin.com/jinazirowa/edit?html,js,Ausgabe

– Engel Salazar

18. Juli 2019 um 20:26 Uhr
Dies sollte ohne Aktualisieren/Rendern funktionieren, solange der Router-Pfad den neuen Pfad kapselt.

– Magnus Stier

26. Januar 2021 um 10:09 Uhr

Nivek Mozart

Ich benutze eine nette Art, die Benutzer zu täuschen, dass sich die URL nicht ändert.

Dazu müssen Sie nur Ihre Routen wie folgt einrichten.

const Home="https://stackoverflow.com/";
const About="https://stackoverflow.com/";
const Contact="https://stackoverflow.com/";

Beachten Sie die Leerzeichen. Alle Zeichen werden innerhalb des Zitats gezählt, also sollte es funktionieren.

Routes.tsx

<Route exact path={Home} component={Home} />
<Route exact path={About} component={About} />
<Route exact path={Contact} component={Contact} />

In Ihrem About.tsx Und Contact.tsx:

  useEffect(() => {
    window.history.replaceState(null, '', Home);
  }, []);

Nachdem der Benutzer zu navigiert hat About oder Contact Seiten, wird der Hook aufgerufen und führt den Code innerhalb der Callback-Funktion aus. Die Leerzeichen werden entfernt, nachdem die Komponente gerendert wurde.

Das sollte ein sauberer Trick sein, um versteckte URLs zu verschleiern 😂

14418400cookie-checkReact-Router: Wie aktualisiere ich die URL, ohne ein Navigieren/Neuladen zu verursachen?

#Javascript #reagieren #reagieren-router