Next.js Перенаправление с / на другую страницу - PullRequest
Новая
       37

Next.js Перенаправление с / на другую страницу

1 голос
/ 30 сентября 2019

Я новичок в Next.js и мне интересно, как, например, перенаправить со стартовой страницы ( / ) на / hello-nextjs ,После того, как пользователь загрузит страницу и после этого определит, будет ли путь === / перенаправлен на / hello-nextjs

In реагирующий маршрутизатор мысделать что-то вроде: 

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

Ответы [ 3 ]

1 голос
/ 01 октября 2019

Существует три подхода.

1.Пересылка на события или функции: 

import Router from 'next/router';

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

2.Переадресация с перехватами: 

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 для перенаправления как на стороне клиента, так и на стороне сервера.

1 голос
/ 01 октября 2019

В next.js вы можете перенаправить, используя Router ex: 

import Router from 'next/router'

componentDidMount(){
    const {pathname} = Router
    if(pathname == '/' ){
       Router.push('/hello-nextjs')
    }
}
0 голосов
/ 03 октября 2019

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