Next.js Weiterleiten von / zu einer anderen Seite

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>

In können next.jsSie nach dem Laden der Seite mit Routerex umleiten :

import Router from 'next/router'

componentDidMount(){
    const {pathname} = Router
    if(pathname == '/' ){
       Router.push('/hello-nextjs')
    }
}

Oder mit Haken:

import React, { useEffect } from "react";
...
useEffect(() => {
   const {pathname} = Router
   if(pathname == '/' ){
       Router.push('/hello-nextjs')
   }
 });

Es gibt drei Ansätze.

1. Weiterleiten von Ereignissen oder Funktionen:

import Router from 'next/router';

<button type="button" onClick={() => Router.push('/myroute')} />

2. Mit Haken umleiten:

import Router , {useRouter}  from 'next/router';

const router = useRouter()

<button type="button" onClick={() => router.push('/myroute')} />

3. Mit Link umleiten:

Basierend auf Nextjs-Dokumenten ist das <a>Tag innerhalb des Links erforderlich, um beispielsweise in einem neuen Tab zu öffnen!

import Link from 'next/link';

<Link href="/myroute">
   <a>myroute</a>
</Link>

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.

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 verwenden useEffect.

import React, {useEffect} from 'react';

export default function App() {
  const classes = useStyles();

  useEffect(() => { 
    const {pathname} = Router
    if(pathname == '/' ){
      Router.push('/templates/mainpage1')
    }  
  }
  , []);
  return (
    null
  )
}

2019 React eingeführt Haken. die sind viel schneller und effizienter als Klassen.

Halboffizielles Beispiel

Die with-cookie-authBeispiele leiten weiter getInitialProps. Ich bin nicht sicher, ob es sich um ein gültiges Muster handelt oder nicht, aber hier ist der Code:

Profile.getInitialProps = async ctx => {
  const { token } = nextCookie(ctx)
  const apiUrl = getHost(ctx.req) + '/api/profile'

  const redirectOnError = () =>
    typeof window !== 'undefined'
      ? Router.push('/login')
      : ctx.res.writeHead(302, { Location: '/login' }).end()

  try {
    const response = await fetch(apiUrl, {
      credentials: 'include',
      headers: {
        Authorization: JSON.stringify({ token }),
      },
    })

    if (response.ok) {
      const js = await response.json()
      console.log('js', js)
      return js
    } else {
      // https://github.com/developit/unfetch#caveats
      return await redirectOnError()
    }
  } catch (error) {
    // Implementation or Network error
    return redirectOnError()
  }
}

Es behandelt sowohl die Server- als auch die Client-Seite. Der fetchAufruf 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

Dies ist der häufigste Fall. Sie möchten an dieser Stelle umleiten, um zu vermeiden, dass die erste Seite beim ersten Laden blinkt.

MyApp.getInitialProps = async appContext => {
    const currentUser = await getCurrentUser(); // define this beforehand
    const appProps = await App.getInitialProps(appContext);
    // check that we are in SSR mode (NOT static and NOT client-side)
    if (typeof window === "undefined" && appContext.ctx.res.writeHead) {
      if (!currentUser && !isPublicRoute(appContext.router.pathname)) {
          appContext.ctx.res.writeHead(302, { Location: "/account/login" });
          appContext.ctx.res.end();
      }
    }
    return { ...appProps, currentUser };
  };

Dies ist ein Fallback für das clientseitige Rendern.

  componentDidMount() {
    const { currentUser, router } = this.props;
    if (!currentUser && !isPublicRoute(router.pathname)) {
      Router.push("/account/login");
    }
  }

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

redirect-to.ts

import Router from "next/router";

export default function redirectTo(
  destination: any,
  { res, status }: any = {}
): void {
  if (res) {
    res.writeHead(status || 302, { Location: destination });
    res.end();
  } else if (destination[0] === "/" && destination[1] !== "/") {
    Router.push(destination);
  } else {
    window.location = destination;
  }
}

_app.tsx

import App, {AppContext} from 'next/app'
import Router from "next/router"
import React from 'react'
import redirectTo from "../utils/redirect-to"


export default class MyApp extends App {
  public static async getInitialProps({Component, ctx}: AppContext): Promise<{pageProps: {}}> {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    if (ctx.pathname === "" || ctx.pathname === "/_error") {
      redirectTo("/hello-next-js", { res: ctx.res, status: 301 }); <== Redirect-To
      return {pageProps};
    }

    return {pageProps};
  }

  render() {
    const {Component, pageProps} = this.props;
    return <Component {...pageProps}/>
  }
}

Ich habe diese Funktionalität in meiner Next.JSApp implementiert, indem ich eine Stammseite definiert habe, die die Server- und Clientseite umleitet. Hier ist der Code für die Stammseite:

import { useEffect } from "react";
import Router from "next/router";

const redirectTo = "/hello-nextjs";

const RootPage = () => {
  useEffect(() => Router.push(redirectTo));
  return null;
};
RootPage.getInitialProps = (ctx) => {
  if (ctx.req) {
    ctx.res.writeHead(302, { Location: redirectTo });
    ctx.res.end();
  }
};

export default RootPage;