Next.js: Möglich, den Status an den nächsten/Router zu übergeben?

Derzeit ist das nicht möglich und ich glaube nicht, dass wir es in unmittelbarer Zukunft unterstützen werden.

Aber lasst uns das öffnen und sehen, ob wir das wirklich wirklich brauchen.

Ich denke, Sie sollten dies tun, indem Sie Abfrageparameter übergeben.

Ich meine, Sie können etwas Ähnliches erreichen, indem Sie Abfrageparameter wie nkzawa sagten, aber ich möchte meine URL lieber nicht mit http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed verschmutzen und hätte lieber eine Zustandsübertragung, wie es der React-Router tut.

Sie können as verwenden, um die URL zu verschleiern

Nun, ich denke schon, aber wenn ich as verwenden würde, behält der Pfadname nicht den tatsächlichen Pfadnamen in props.url.pathname bei, was bedeutet, dass mehr Dinge an die Abfrage übergeben werden müssen. Es ist einfach _sauberer_, es den Staat passieren zu lassen.

Ich portiere ein Projekt auf next.js und bin auf keine größeren Kompatibilitätsprobleme gestoßen, seit ich Wege gefunden habe, Codes umzugestalten, damit es funktioniert. Es sind nur Unannehmlichkeiten und Ausführlichkeit an dieser Stelle, die verbessert werden können, und all dieses Problem ist .

Vielen Dank für Ihren Beitrag.

Schließung dieser Ursache der Inaktivität 👍

Etwas mehr als ein Jahr, seit ich das angesprochen habe, aber ist das immer noch nicht tragbar?

Sie können jeden erforderlichen Status in localStorage, sessionStorage, einer Variablen, einem Redux-Speicher usw. speichern und ihn dann in getInitialProps verwenden (überprüfen, ob Sie clientseitig ausgeführt werden).

Ich denke, nextjs sollte anfangen, React-Router zu unterstützen

Ich möchte die gleiche Funktionalität.

Früher habe ich CRA verwendet und dort den Status an die geroutete Komponente gesendet. Ich möchte die gleiche Funktionalität mit nextjs.

Was @sergiodxa in der Problemumgehung vorgeschlagen hat, aber die Bibliotheksunterstützung wird gut sein.

Auch hier wäre es toll, wenn es möglich wäre, Daten mit Router.push() zu übergeben und später mit withRouter abzurufen

Ich möchte die gleiche Funktionalität. Gibt es hierzu Neuigkeiten ?

Ich möchte die gleiche Funktionalität. Gibt es hierzu Neuigkeiten ?

ich auch

Eine weitere Frage zu diesem Thema ist:

• Ich möchte meine URL nicht verschmutzen, wenn ich Router.push() aufrufe, und ich möchte einen Status an die nächste Komponente übergeben. Gibt es eine Möglichkeit, dies zu tun? Die Verwendung von localStorage oder Cookies ist eine schlechte Praxis, da sie nicht direkt von React-Hooks oder dem alten React-Lebenszyklus gesteuert werden

Ich habe ein Szenario, in dem ich eine anklickbare Komponente habe. Wenn Sie darauf klicken, wird die Detailseite geöffnet. Mit dem aktuellen next.js kann ich die Projekt-ID übergeben und dann die Details mit useEffect und axios call abrufen, aber da ich bereits die Daten habe, die ich wirklich wünschte, könnte ich den Status an diese Seite senden.

Wäre schön das zu haben.

@sergiodxa Ja, es gibt viele Möglichkeiten, temporäre Nachrichten zu übergeben, aber der Vorteil der Anbindung an den Router besteht darin, dass wir keinen zusätzlichen Code schreiben müssen, um den Lebenszyklus der von uns weitergegebenen Werte zu verwalten. Sie sind an Router-Navigationsereignisse gebunden und in anderen Kontexten nicht verfügbar.

Wenn ich es beispielsweise in meinen Redux-Speicher schiebe, muss ich es davon ausschließen, dass es im lokalen Speicher gespeichert wird, und außerdem eine klare Nachrichtenaktion auf der Empfängerseite senden.

Wenn ich die Abfragezeichenfolge hinzufüge, wird sie zu einem dauerhaften Link, der Lesezeichen verwenden und später zurückkehren kann.

Aber wenn ich es auf die nächste Seite und nur die nächste Seite über router.push schieben kann, muss ich keine Kompensationen vornehmen; der Wert ist nur in diesem Kontext verfügbar.

Sehr ähnlich wie Connect-Flash

Keine Lösung seit dem 15. Januar 2017?
Wir brauchen diese Funktion:

Auch hier wäre es toll, wenn es möglich wäre, Daten mit Router.push() zu übergeben und später mit withRouter abzurufen

Wäre schön, dies in nextjs zu haben

Wenn Sie Abfrageparameter ausblenden möchten, verwenden Sie einfach so

Router.push(`/main?userName=${userName}`, 'main')

als die Hauptseite, sehen Sie nur /main auf URL und
console.log(Router.route) zeigt Abfrage

pathname: "/main"
query: {userName: "fadsfasd"}
asPath: "main"

ach ja, das stimmt. Übrigens finde ich es wirklich umständlich, dass der Router zwei Strings benötigt. react-router funktioniert wunderbar ohne, warum das?

Für diejenigen, die es schaffen möchten, können Sie Context Api verwenden.

Next.js stellt die router.push() -Übergabe shallow: true als Requisite bereit.
Es ist die einfachste Zustandsverwaltung, dies zu tun.
https://nextjs.org/docs/api-reference/next/router#routerpush

Ich bin bereit, dies zu überdenken, es ist jedoch ein großartiger Vorschlag erforderlich, wie Benutzer daran gehindert werden können, sich mit dem Verlaufsstatus in den Fuß zu schießen, da Sie beispielsweise nicht serverseitig auf den Verlaufsstatus zugreifen können. Es wäre sehr einfach, Flüssigkeitsprobleme zu verursachen.

Beachten Sie, dass das erneute Öffnen nicht bedeutet, dass ich keinen RFC für diese Funktion schreiben werde, das wäre Sache der Leute, die diese Funktion haben möchten.

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

Mehr als 2 Jahre und immer noch auf Statusfeature warten

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

Dies ist immer noch kein interner Zustand, sondern eine Abfragezeichenfolge mit einer Maskenfunktion, was meiner Meinung nach eine ziemlich seltsame Sache ist.

Ich bin mit dem React-Ökosystem nicht sehr vertraut. Aber es scheint, dass Sie tun können

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

Wenn Sie zurückgehen und vor PopState nachsehen, enthält die Option prop { step: 2 } .

Wir brauchen dies nur im Objekt router .

Ich bin mit dem React-Ökosystem nicht sehr vertraut. Aber es scheint, dass Sie tun können

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

Wenn Sie zurückgehen und vor PopState nachsehen, enthält die Option prop { step: 2 } .

Wir brauchen dies nur im Objekt router .

Es scheint wie ein weiterer zeitlicher Hack, kein absichtliches Verhalten. Erwartete Optionen sind in der Dokumentation aufgeführt. Aber etwas Ähnliches wäre großartig, um das erwartete Verhalten zu haben

@likerRr Anscheinend werden alle Optionsparameter an window.history.state übergeben. Also mit meinem Beispiel:
window.history.state == { step: 2 }

@likerRr Anscheinend werden alle Optionsparameter an window.history.state übergeben. Also mit meinem Beispiel:
window.history.state == { step: 2 }

Scheint so zu sein. Wie auch immer, bis es dokumentiert ist, kann es nicht in Prod verwendet werden, da die Implementierung von Passing-Optionen jederzeit geändert werden kann :disappointed: Ein weiteres Problem (?) mit dem Verlaufsstatus, dass es persistent ist. Und wenn Sie mit den "Zurück"/"Vor"-Tasten spielen, werden Sie meistens unerwartetes Verhalten bekommen.

Soweit ich verstehe, besteht der Anwendungsfall dessen, was die Community möchte, darin, Daten zu übergeben, die nur während des Übergangs von einer Seite zur anderen hinterlassen werden, und wir müssen uns nicht darum kümmern, sie zu löschen. Und diese Daten sollten nicht erneut erscheinen, wenn der Benutzer in einem Browser „vor/zurück“ klickt. Ansonsten ist dies der beste Vorschlag (imo).

Wäre schön, wenn next js dies berücksichtigen würde

Das hat bei mir funktioniert, Sie können verwenden
https://github.com/vercel/next.js/issues/771#issuecomment -612018764

1: auf der Abonnementseite:
const handleClick = useCallback((mount) => {
Router.push( /payment?mount=${mount} , '/payment');
}, []);
2: auf der Zahlungsseite
useEffect(() => {
konstant {
Abfrage: {Mount},
} = Router;
!mount && Router.push('/campaign-overview/subscription');
console.log('PaymentVM:React.FC -> mount', mount);
}, []);

Sie können den Wert von mount im Konsolenbrowser sehen.

Ich verstehe das Problem und die Bequemlichkeit, den Zustand in router.push weitergeben zu können.

Wäre folgendes eine Übergangslösung?

Verwenden Sie den history.pushState des Browsers sowie einen lokalen useState einer Standortzeichenfolge, und wenn wir umleiten möchten, verwenden wir history.pushState und setzen einen neuen Wert für den lokalen Standortstatus. Eine Aktualisierung des location-string-state sollte einen useEffect-Lauf auslösen. Dann haben Sie eine JS-Switch-Anweisung, die den Standort auswertet und Komponenten basierend auf dem Standort zurückgibt. Und wenn wir ohne history.pushState zur selben Komponente gelangen wollen (z. B. wenn der Benutzer die Seite aktualisiert), können wir den Ort zu einem dynamischen Parameter für die nächste Abfrage machen. -- habe es nicht versucht, nur versucht, an Problemumgehungen zu denken.

Für diejenigen, die es schaffen möchten, können Sie Context Api verwenden.

Next.js stellt die router.push() -Übergabe shallow: true als Requisite bereit.
Es ist die einfachste Zustandsverwaltung, dies zu tun.
https://nextjs.org/docs/api-reference/next/router#routerpush

Was ist, wenn ich in meinem in meinem getServerSideProps zwei Aufrufe mache, von denen einer für jeden Ladevorgang wiederholt werden sollte und einer nur mit einer Bedingung geladen werden sollte. Dafür würde Shallow: true nicht viel helfen, da es kein Zustandsmanager ist, entweder getServerSideProps wiederholen oder es überhaupt nicht tun.
Ein Beispiel für dieses Szenario wäre, wenn ich zwei separate Anrufe in getServerSideProps mache. Einer für den Hauptinhalt der Seite und dann ein weiterer Aufruf, um die Navigationslinks zu erhalten. In einem anfänglichen Rendering möchte ich, dass beide Aufrufe auf dem Server sind, aber dann habe ich die Navigationslinks bereits im Speicher, sodass ich sie nicht erneut abrufen muss. Deshalb brauchen wir Staat.

Die einzige Lösung besteht darin, eine as -Option mit versteckten Abfrageparametern mitzusenden, aber unser Code wäre schrecklich, wenn wir für jedes <Link/> , das wir übergeben, eine Reihe von Abfrageparametern übergeben, die unseren aktuellen Status enthalten. (Eigentlich denke ich beim Schreiben daran, einen HOC-Link zu erstellen, der zum angegebenen href gehen und ein Abfrageobjekt mit dem aktuellen Status mitsenden sollte, damit ich das Statusobjekt nicht in jedes <Linke/> schreiben müsste, ich werde das nur im HOC erledigen)