Next.js पुनर्निर्देशित / से दूसरे पृष्ठ पर

Question

मैं Next.js में नया हूं और मैं सोच रहा हूं कि उदाहरण के लिए प्रारंभ पृष्ठ ( / ) से / hello-nextjs तक कैसे पुनर्निर्देशित किया जाए । एक बार उपयोगकर्ता एक पृष्ठ लोड करता है और उसके बाद यह निर्धारित करता है कि पथ === / redirect to / hello-nextjs

में प्रतिक्रिया रूटर हम जैसे कुछ कार्य करें:

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

Comments

जब आप चाहते हैं कि पुनर्निर्देशित होता है?

— निको

@ Nicol aCozzani, एक बार उपयोगकर्ता एक पृष्ठ लोड करता है। और उसके बाद निर्धारित करें कि url === / redirect to / hello-nextjs

— आर्थर

Answer 1

में 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')
   }
 });

Comments

मैं रिएक्ट हुक के साथ कैसे करूँ ??

— टेसैक्टर बैक्टीरिया

कक्षाओं का उपयोग किए बिना

— Tessaracter

@ टेसटैक्टर उत्तर अपडेट किया गया

— निको

SSR के बारे में क्या? प्रारंभिक पृष्ठ इस दृष्टिकोण के साथ चमक रहा है

— एरिक ब्यूरल

@ EricBurel ओपी ने स्पष्ट रूप से पूछा "एक बार उपयोगकर्ता एक पृष्ठ लोड करता है" btw इस github.com/zeit/next.js/issues/649 की

— निको

Answer 2

तीन दृष्टिकोण हैं।

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>टैग एक नई टैब में खुली चीजों के लिए लिंक के अंदर neccessary है!

import Link from 'next/link';

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

सर्वरसाइड रूटिंग के लिए कुछ अन्य विकल्प हैं जो है asPath। सभी वर्णित दृष्टिकोणों में आप क्लाइंट और सर्वर साइड दोनों को रीडायरेक्ट करने के लिए asPath जोड़ सकते हैं।

Comments

नमस्ते! आप मेरे समाधान को देख सकते हैं

— आर्थर

यह एक अनिवार्य दृष्टिकोण है। यह उपयोगकर्ता की कार्रवाई पर पुनर्निर्देशित करने के लिए ठीक है, लेकिन पृष्ठ लोड पर एक शर्त पर आधारित नहीं है जैसा कि प्रश्न में कहा गया है।

— एरिक ब्यूरेल

मैं तुम्हें क्या मतलब नहीं मिला !?

— अफसानेफडा

सवाल वर्तमान रूट पथनाम के आधार पर स्वचालित रूप से पुनर्निर्देशित करने के बारे में है। इस संदर्भ में आपके उत्तर मान्य हैं लेकिन प्रशंसनीय नहीं हैं: इन सभी के लिए उपयोगकर्ता क्लिक की आवश्यकता है।

— एरिक ब्यूरेल

@ EricBurel, हां, यह वह नहीं है जो मैं चाहता था, यह जवाब मेरे सवाल का हल नहीं करता है

— आर्थर

Answer 3

@ निको का उत्तर उस समस्या को हल करता है जब आप कक्षाओं का उपयोग कर रहे होते हैं।

यदि आप फ़ंक्शन का उपयोग कर रहे हैं तो आप उपयोग नहीं कर सकते componentDidMount। इसके बजाय आप रिएक्ट हुक का उपयोग कर सकते हैं 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 में रिएक्ट ने हुक पेश किए । जो कक्षाओं की तुलना में बहुत तेज और कुशल हैं।

Comments

यह समस्या बताती है कि मैं परिणाम के रूप में क्या चाहता था

— आर्थर

@ आर्थर ओह, लेकिन आपका सवाल ऐसा नहीं कहता। @ निको और मेरा का उत्तर बिल्कुल एक जैसा है और इसके लिए एक विकल्प है <Switch>जिसका आप उपयोग कर रहे हैं React-router। यहां तक ​​कि <Switch>कोई 303, 302 स्टेटस कोड भी प्रदान नहीं करता है। बस पुनर्निर्देशित

— Tessaracter

खैर, मुझे लगता है कि यहाँ भी चर्चा की गई है। बस एहसास हुआ कि NextJS कोई स्थिति कोड निर्धारित नहीं करता है। github.com/zeit/next.js/issues/9443

— Tessaracter

कृपया कक्षाएं हटा दें। यहां इसका कोई फायदा नहीं है।

— पुष्प सिंह

Answer 4

अर्ध-आधिकारिक उदाहरण

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कॉल एक है कि वास्तव में प्रमाणीकरण टोकन मिलता है, तो आपको एक अलग समारोह में इस संपुटित करना चाह सकते हैं है।

मैं इसके बजाय क्या सलाह दूंगा

 1. सर्वर-साइड रेंडर पर रीडायरेक्ट (SSR के दौरान फ्लैश से बचें)

यह सबसे आम मामला है। आप पहले लोड पर चमकती प्रारंभिक पृष्ठ से बचने के लिए इस बिंदु पर पुनर्निर्देशित करना चाहते हैं।

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

 2. रीडायरेक्ट में घटकडिमाउंट (उपयोगी जब SSR अक्षम होता है, जैसे स्थैतिक मोड में)

यह क्लाइंट साइड रेंडरिंग के लिए एक गिरावट है।

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

मैं स्थैतिक मोड में शुरुआती पृष्ठ को चमकाने से नहीं बच सकता था, इस बिंदु को जोड़ दें, क्योंकि आप स्थैतिक निर्माण के दौरान पुनर्निर्देशित नहीं कर सकते, लेकिन यह सामान्य दृष्टिकोणों से बेहतर लगता है। मैं प्रगति करते ही संपादित करने की कोशिश करूँगा।

पूरा उदाहरण यहां है

प्रासंगिक मुद्दा, जो दुख की बात है कि केवल एक ग्राहक के साथ समाप्त होता है

Answer 5

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

Comments

यह स्वीकृत उत्तर नहीं होना चाहिए। इस github.com/zeit/next.js/issues/4931#issuecomment-512787861 के अनुसार आपको पुनर्निर्देशित नहीं करना चाहिए getInitialProps। @Afsanefda को स्वीकृत उत्तर होना चाहिए। और इसके अलावा आप next.js का उपयोग कर रहे हैं। मार्गों को व्यवस्थित करने के लिए आपको राउटर की प्रतिक्रिया की आवश्यकता नहीं है। अगला पहले से ही डिफ़ॉल्ट रूप से संभालता है।

— रोटिमी-बेस्ट

@ रोटिमी-बेस्ट, जहां तक ​​मुझे याद है, मैंने यह कोड next.js उदाहरण से लिया। इसके अलावा, मैंने एक प्रतिक्रिया-राउटर का उपयोग नहीं किया, यह एक उदाहरण के रूप में प्रस्तुत किया गया था कि मैं क्या प्राप्त करना चाहता हूं

— आर्थर

यह एक मान्य उत्तर है लेकिन केवल SSR के साथ। यह स्टैटिक ऐप्स में रीडायरेक्ट नहीं होगा। संपादित करें: वास्तव में यह आपको Router.push जोड़ देगा, हालांकि क्लाइंट-साइड Router.pushको घटक जीवनचक्र के तरीकों में जाना चाहिए

— Eric Burel

Answer 6

मैंने अपने 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;