Next.js অন্য পৃষ্ঠায় / থেকে পুনর্নির্দেশ

15

আমি Next.js এ নতুন এবং আমি ভাবছি যে উদাহরণস্বরূপ কীভাবে প্রারম্ভিক পৃষ্ঠা ( / ) থেকে / হ্যালো-নেক্সটজেসে পুনর্নির্দেশ করা যায় । একবার ব্যবহারকারী কোনও পৃষ্ঠা লোড করে এবং তারপরে নির্ধারণ করে যে পথ === / / হ্যালো-নেক্সটজেসে পুনঃনির্দেশ করুন কিনা

ইন প্রতিক্রিয়া-রাউটার আমরা ভালো কিছু করতে:

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

— আর্থার
সূত্র

1

আপনি যখন চান যে পুনর্নির্দেশ ঘটে?

— নিকো

@ নিকোলকোজানানী, একবার ব্যবহারকারী কোনও পৃষ্ঠা লোড করুন। এবং তারপরে নির্ধারণ করুন ইউআরএল === / পুনঃনির্দেশ / হ্যালো-নেক্সটজেস

— আর্থার

23

ইন 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')
   }
 });

— নিকো
সূত্র

আমি কীভাবে প্রতিক্রিয়া হুক করব?

— টেসারাক্টার

ক্লাস ব্যবহার না করে

— টেসারাক্টার

2

@ টেসারাক্টর উত্তর আপডেট হয়েছে

— নিকো

2

এসএসআর সম্পর্কে কী? প্রাথমিক পৃষ্ঠাটি এই পদ্ধতির সাথে

— জ্বলজ্বল করছে

@ এরিকবুরেল ওপি স্পষ্টভাবে "একবার ব্যবহারকারী একটি পৃষ্ঠা লোড করার জন্য" জিজ্ঞাসা করেছিল, বিটিডব্লিউটি

— নিকো

16

তিনটি পন্থা আছে।

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. লিঙ্ক সহ পুনর্নির্দেশ:

নেক্সটজ ডক্সের উপর ভিত্তি করে <a>ট্যাগটি কোনও নতুন ট্যাবে খোলার মতো জিনিসের জন্য লিঙ্কের অভ্যন্তরে প্রয়োজনীয়!

import Link from 'next/link';

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

সার্ভারসাইড রাউটিংয়ের জন্য অন্য কিছু বিকল্প রয়েছে asPath। সমস্ত বর্ণিত পদ্ধতিতে আপনি ক্লায়েন্ট এবং সার্ভার উভয় দিককেই পুনর্নির্দেশের জন্য asPath যুক্ত করতে পারেন।

— Afsanefda
সূত্র

ওহে! আপনি আমার সমাধানটি দেখতে পারেন

— আর্থার

এটি একটি আবশ্যক পদ্ধতির। ব্যবহারকারীর ক্রিয়াতে পুনর্নির্দেশ করা ঠিক আছে তবে প্রশ্নে বর্ণিত পৃষ্ঠা লোডের শর্তের ভিত্তিতে নয়।

— এরিক বুরেল

আপনি যা বলতে চেয়েছিলেন তা আমি পাইনি !?

— আফসানেফদা

প্রশ্নটি বর্তমান রুটের পথের নামের উপর নির্ভর করে স্বয়ংক্রিয়ভাবে পুনঃনির্দেশ সম্পর্কে। আপনার উত্তরগুলি বৈধ তবে এই প্রসঙ্গে প্রযোজ্য নয়: সেগুলির জন্য একটি ব্যবহারকারী ক্লিক প্রয়োজন।

— এরিক বুরেল

@ এরিকবুরেল, হ্যাঁ, আমি যা চেয়েছিলাম এটি তা নয়, এই উত্তরটি আমার প্রশ্নের সমাধান করে না

— আর্থার

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 সালে প্রতিক্রিয়া হুক প্রবর্তিত । যা ক্লাসের চেয়ে অনেক দ্রুত এবং দক্ষ।

— Tessaracter
সূত্র

এই ইস্যুটিতে আমি ফলাফল হিসাবে কী চেয়েছিলাম তা বর্ণনা করে

— আর্থার

@ আর্থার ওহ, তবে আপনার প্রশ্নটি তাই বলে না। @ নিকো এবং আমার উত্তরগুলি হুবহু এক এবং <Switch>আপনি যেটি ব্যবহার করছেন তার বিকল্প React-router। এমনকি <Switch>কোনও 303, 302 স্থিতি কোড সরবরাহ করে না। কেবল পুনর্নির্দেশগুলি

— টেসারাক্টার

ঠিক আছে, আমি এখানেও আলোচনা আলোচনা মনে করি। ঠিক বুঝতে পেরেছি যে নেক্সটজেএস কোনও স্ট্যাটাস কোড সেট করে না। github.com/zeit/next.js/issues/9443

— টেসারাকটার

ক্লাস অপসারণ করুন। এটি এখানে কোনও কাজে আসে না।

— পুষ্প সিং

3

আধা-সরকারী উদাহরণ

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কল এক যে আসলে প্রমাণীকরণ টোকেন পেতে, আপনি একটি পৃথক ফাংশন মধ্যে এই encapsulate করতে চাইবেন হয়।

পরিবর্তে আমি কি পরামর্শ দেব

1. সার্ভার-সাইড রেন্ডারে পুনঃনির্দেশ (এসএসআর চলাকালীন ফ্ল্যাশ এড়ানো)

এটি সবচেয়ে সাধারণ ঘটনা। প্রথম লোডে প্রারম্ভিক পৃষ্ঠা ঝলকানি এড়াতে আপনি এই মুহুর্তে পুনর্নির্দেশ করতে চান।

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

আমি স্ট্যাটিক মোডে প্রাথমিক পৃষ্ঠাটি ঝলকানো এড়াতে পারিনি, কারণ আপনি স্ট্যাটিক বিল্ড চলাকালীন পুনর্নির্দেশ করতে পারবেন না, তবে এটি স্বাভাবিক পদ্ধতির চেয়ে ভাল বলে মনে হয়। আমি অগ্রগতি হিসাবে সম্পাদনা করার চেষ্টা করব।

সম্পূর্ণ উদাহরণ এখানে

প্রাসঙ্গিক ইস্যু, যা দুঃখের সাথে ক্লায়েন্টের কেবল উত্তর দিয়ে শেষ হয়

— এরিক বুরেল
সূত্র

1

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

— আর্থার
সূত্র

2

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত নয়। এই github.com/zeit/next.js/issues/4931#issuecomment-512787861 অনুসারে আপনাকে পুনঃনির্দেশ করা উচিত নয় getInitialProps। @ আফসানফদা স্বীকৃত উত্তর হওয়া উচিত। এবং এছাড়াও আপনি Next.js ব্যবহার করছেন রুটগুলি সংগঠিত করতে আপনার প্রতিক্রিয়া রাউটারের দরকার নেই। পরবর্তীটি ডিফল্টরূপে এটি ইতিমধ্যে পরিচালনা করে।

— রোটিমি-সেরা

3

@ রোটিমি বেস্ট, যতদূর আমার মনে আছে, আমি এই কোডটি পরবর্তী জেএস উদাহরণ থেকে নিয়েছি। এছাড়াও, আমি একটি প্রতিক্রিয়া-রাউটারটি ব্যবহার করি নি, এটি আমি কী পেতে চাইছিলাম তার একটি উদাহরণ হিসাবে উপস্থাপিত হয়েছিল

— আর্থার

2

এটি একটি বৈধ উত্তর তবে কেবল এসএসআর সহ। এটি স্থির অ্যাপ্লিকেশনগুলিতে পুনর্নির্দেশ করবে না। সম্পাদনা করুন: বাস্তবে এটি আপনি রাউটার.পুশ যুক্ত করবেন, তবে ক্লায়েন্ট-সাইডটি Router.pushপরিবর্তে উপাদান লাইফসাইক্যাল পদ্ধতিতে চলে যেতে হবে

— এরিক বুরেল

1

আমি আমার 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;

— BruceHill
সূত্র