প্রতিক্রিয়া রাউটার ব্যবহার করে কোনও পৃষ্ঠা পুনর্নির্দেশের সর্বোত্তম উপায় কী?

Question 1

আমি প্রতিক্রিয়া রাউটারে নতুন এবং এটি শিখছি যে কোনও পৃষ্ঠা পুনর্নির্দেশ করার অনেকগুলি উপায় রয়েছে:

ব্যবহার browserHistory.push("/path")

import { browserHistory } from 'react-router';
//do something...
browserHistory.push("/path");

ব্যবহার this.context.router.push("/path")

class Foo extends React.Component {
    constructor(props, context) {
        super(props, context);
        //do something...
    }
    redirect() {
        this.context.router.push("/path")
    }
}

Foo.contextTypes = {
    router: React.PropTypes.object
}

প্রতিক্রিয়া রাউটার ভি 4 এ, আছে this.context.history.push("/path")এবং আছে this.props.history.push("/path")। বিশদ: কীভাবে প্রতিক্রিয়া রাউটার ভি 4 তে ইতিহাসে ঠেলা যায়?

আমি এই সমস্ত অপশন দ্বারা তাই বিভ্রান্ত, একটি পৃষ্ঠা পুনর্নির্দেশ করার জন্য কি সর্বোত্তম উপায় আছে?

Question 2

আসলে এটি আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে।

1) আপনি অননুমোদিত ব্যবহারকারীদের থেকে আপনার রুটটি রক্ষা করতে চান

যদি এটি হয় তবে আপনি ডাকা উপাদানটি ব্যবহার করতে পারেন <Redirect />এবং নিম্নলিখিত যুক্তিটি প্রয়োগ করতে পারেন:

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

মনে রাখবেন যে আপনি <Redirect />যদি নিজের প্রত্যাশা মতো কাজ করতে চান তবে আপনার এটিকে আপনার উপাদানটির রেন্ডার পদ্ধতির ভিতরে রাখা উচিত যাতে এটি শেষ পর্যন্ত একটি ডিওএম উপাদান হিসাবে বিবেচিত হয়, অন্যথায় এটি কাজ করবে না।

2) আপনি একটি নির্দিষ্ট ক্রিয়া পরে পুনঃনির্দেশ করতে চান (আসুন একটি আইটেম তৈরি করার পরে বলি)

সেক্ষেত্রে আপনি ইতিহাস ব্যবহার করতে পারেন:

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

বা

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

ইতিহাসে অ্যাক্সেস পেতে, আপনি এইচওসি ডেকে আপনার উপাদানটি মোড়ানো করতে পারেন withRouter। আপনি যখন এটির সাথে আপনার উপাদানটি মোড়েন , এটি পাস match locationএবং historyপ্রপস। আরও বিশদের জন্য দয়া করে রউটারের সাথে সরকারী ডকুমেন্টেশনটি দেখুন ।

আপনার কম্পোনেন্ট একটি সন্তান হয়, তাহলে <Route />উপাদান, অর্থাৎ যদি এটা ভালো কিছু হয় <Route path='/path' component={myComponent} />তখন আপনি আপনার উপাদান মোড়ানো হবে না withRouter, কারণ <Route />পাস match, locationএবং historyতার সন্তান।

3) কিছু উপাদান ক্লিক করার পরে পুনঃনির্দেশ

এখানে দুটি বিকল্প রয়েছে। আপনি history.push()এটি একটি onClickইভেন্টে পাস করে ব্যবহার করতে পারেন :

<div onClick={this.props.history.push('/path')}> some stuff </div>

অথবা আপনি কোনও <Link />উপাদান ব্যবহার করতে পারেন :

 <Link to='/path' > some stuff </Link>

আমি মনে করি এই ক্ষেত্রে থাম্বের নিয়মটি <Link />প্রথমে ব্যবহারের চেষ্টা করা উচিত , আমি মনে করি বিশেষত পারফরম্যান্সের কারণে।

Question 3

এখন প্রতিক্রিয়া-রাউটার দিয়ে v15.1এবং এরপরে আমরা useHistoryহুক করতে পারি , এটি অত্যন্ত সহজ এবং পরিষ্কার উপায়। সোর্স ব্লগ থেকে এখানে একটি সাধারণ উদাহরণ।

import { useHistory } from "react-router-dom";

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

আপনি এটি কোনও কার্যকরী উপাদান এবং কাস্টম হুকের মধ্যে ব্যবহার করতে পারেন। এবং হ্যাঁ এটি শ্রেণীর উপাদানগুলির সাথে অন্য কোনও হুকের মতো কাজ করবে না।

এটি সম্পর্কে এখানে আরও জানুন https://reacttraining.com/blog/react-router-v5-1/#usehistory

Question 4

আপনি প্রতিক্রিয়া রাউটার ডোম লাইব্রেরি ব্যবহারের ইতিহাসও ব্যবহার করতে পারেন;

`
import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
`

https://reactrouter.com/web/api/Hooks/usehistory

Question 5

সবচেয়ে সহজ উপায়: লিঙ্কটি নীচে ব্যবহার করুন:

import { Link } from 'react-router-dom';

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

যদি আমরা লিঙ্ক হিসাবে পুরো ডিভিশন বিভাগটি কভার করতে চাই:

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

Question 6

আপনি এটিও করতে পারেন Redirectমধ্যে Routeযেমন অনুসরণ করে। এটি অবৈধ রুটগুলি পরিচালনা করার জন্য।

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>