Ich bin neu in Next.js und frage mich, wie ich zum Beispiel von der Startseite ( / ) zu / hello-nextjs umleiten kann . Sobald der Benutzer eine Seite lädt und danach feststellt, ob path === / redirect to / hello-nextjs ist
Im React-Router machen wir so etwas wie:
<Switch>
<Route path="/hello-nextjs" exact component={HelloNextjs} />
<Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} />
</Switch>
Antworten:
In können
next.js
Sie nach dem Laden der Seite mitRouter
ex umleiten :Oder mit Haken:
quelle
Es gibt drei Ansätze.
1. Weiterleiten von Ereignissen oder Funktionen:
2. Mit Haken umleiten:
3. Mit Link umleiten:
Basierend auf Nextjs-Dokumenten ist das
<a>
Tag innerhalb des Links erforderlich, um beispielsweise in einem neuen Tab zu öffnen!Es gibt einige andere Optionen für das serverseitige Routing
asPath
. In allen beschriebenen Ansätzen können Sie asPath hinzufügen, um sowohl die Client- als auch die Serverseite umzuleiten.quelle
Die Antwort von @ Nico löst das Problem, wenn Sie Klassen verwenden.
Wenn Sie eine Funktion verwenden, können Sie diese nicht verwenden
componentDidMount
. Stattdessen können Sie React Hooks verwendenuseEffect
.2019 React eingeführt Haken. die sind viel schneller und effizienter als Klassen.
quelle
<Switch>
, in der Sie sie verwendenReact-router
. Auch<Switch>
bietet keinen 303, 302 Statuscode. Nur WeiterleitungenHalboffizielles Beispiel
Die
with-cookie-auth
Beispiele leiten weitergetInitialProps
. Ich bin nicht sicher, ob es sich um ein gültiges Muster handelt oder nicht, aber hier ist der Code:Es behandelt sowohl die Server- als auch die Client-Seite. Der
fetch
Aufruf ist derjenige, der tatsächlich das Authentifizierungstoken erhält. Möglicherweise möchten Sie diesen in eine separate Funktion kapseln.Was ich stattdessen raten würde
1. Weiterleiten beim serverseitigen Rendern (Flash während der SSR vermeiden)Dies ist der häufigste Fall. Sie möchten an dieser Stelle umleiten, um zu vermeiden, dass die erste Seite beim ersten Laden blinkt.
2. Umleiten in componentDidMount (nützlich, wenn SSR deaktiviert ist, z. B. im statischen Modus)Dies ist ein Fallback für das clientseitige Rendern.
Ich konnte es nicht vermeiden, die erste Seite im statischen Modus zu flashen. Fügen Sie diesen Punkt hinzu, da Sie während des statischen Builds nicht umleiten können, aber es scheint besser zu sein als die üblichen Ansätze. Ich werde versuchen zu bearbeiten, wenn ich Fortschritte mache.
Das vollständige Beispiel finden Sie hier
Relevantes Problem, das leider nur von einem Kunden beantwortet wird
quelle
redirect-to.ts
_app.tsx
quelle
getInitialProps
. @Afsanefda sollte die akzeptierte Antwort sein. Außerdem verwenden Sie next.js. Sie benötigen keinen Reaktionsrouter, um Routen zu organisieren. Next behandelt das bereits standardmäßig.Router.push
stattdessen in die Methoden des Komponentenlebenszyklus einsteigenIch habe diese Funktionalität in meiner
Next.JS
App implementiert, indem ich eine Stammseite definiert habe, die die Server- und Clientseite umleitet. Hier ist der Code für die Stammseite:quelle