Next.js를 다른 페이지로 /에서 다른 페이지로 리디렉션

Next.js의 새로운 기능으로 시작 페이지 ( / )에서 / hello-nextjs 로 리디렉션하는 방법이 궁금합니다 . 사용자가 페이지를로드 한 후 path === / / hello-nextjs로 리디렉션 되는지 확인

에서이 반응 라우터 우리가 그런 짓을 :

<Switch>
  <Route path="/hello-nextjs" exact component={HelloNextjs} />
  <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} />
</Switch>

에서 next.js리디렉션 수있는 페이지가로드 된 후 사용 Router예를 :

import Router from 'next/router'

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

또는 후크 포함 :

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

세 가지 접근 방식이 있습니다.

1. 이벤트 또는 기능에 대한 리디렉션 :

import Router from 'next/router';

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

후크로 2.Redirect :

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

const router = useRouter()

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

3. 링크로 리디렉션 :

Nextjs 문서를 기반으로 <a>새 탭에서 열기와 같은 링크에 태그가 필요합니다!

import Link from 'next/link';

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

서버 측 라우팅에 대한 다른 옵션이 asPath있습니다. 모든 설명 된 접근 방식에서 asPath를 추가하여 클라이언트와 서버 측을 모두 리디렉션 할 수 있습니다.

@Nico의 답변은 수업을 사용할 때 문제를 해결합니다.

기능을 사용하면 사용할 수 없습니다 componentDidMount. 대신 React Hooks를 사용할 수 있습니다 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 는 후크를 도입했습니다 . 수업보다 훨씬 빠르고 효율적입니다.

준공식 예

with-cookie-auth예에서 리디렉션 getInitialProps. 유효한 패턴인지 아직 확실하지 않지만 다음 코드가 있습니다.

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()
  }
}

서버 측과 클라이언트 측을 모두 처리합니다. 그만큼fetch호출은 실제로 인증 토큰을 얻을 하나, 별도의 함수로이를 캡슐화 할 수 있습니다입니다.

내가 대신 조언하는 것

가장 일반적인 경우입니다. 처음로드 할 때 초기 페이지가 깜박이지 않도록이 시점에서 리디렉션하려고합니다.

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 };
  };

이것은 클라이언트 측 렌더링의 대체입니다.

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

정적 모드에서 초기 페이지를 플래시하지 않아도이 지점을 추가 할 수 있습니다. 정적 빌드 중에 리디렉션 할 수는 없지만 일반적인 방법보다 낫습니다. 진행하면서 편집하려고합니다.

전체 예는 여기

슬프게도 클라이언트 만 답변하는 관련 문제

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}/>
  }
}

Next.JS루트 페이지를 정의하여 내 앱 에서이 기능을 구현 하여 리디렉션 서버 측과 클라이언트 측을 수행합니다. 루트 페이지의 코드는 다음과 같습니다.

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;