রিস্ট্যাক্ট-রাউটার ভি 4-তে ইতিহাস.পশ / লিংক / পুনঃনির্দেশের সাথে কীভাবে প্যারামগুলি পাস করবেন?

Question

আমরা কীভাবে this.props.history.push('/page')প্রতিক্রিয়া-রাউটার v4 এর সাথে পরামিতিটি পাস করতে পারি ?

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.push('/template');
          });

Comments

কম্পোনেন্ট একটি দ্বারা রেন্ডার করা হয় Routeএক্সেস আছে উচিত this.props.location, this.props.historyইত্যাদি আমি আপনি ব্যবহার করতে প্রয়োজন হবে না মনে refV4 সঙ্গে আর। করার চেষ্টা করুনthis.props.history.push('/template');

— সাদাক

এটি রেফ নয়, এটি পরিবর্তনশীল যে এটি নির্দেশ করে; this.props.history.push ( '/ টেমপ্লেট'); আমাকে পরবর্তী পৃষ্ঠায় নিয়ে যান তবে আমি তাদের সাথে প্রপস পাস করতে চাই .ref = this;

— ইশানগার্গ

আপনি propsরুটের সাথে মেলে এমন উপাদানটিতে যাওয়ার চেষ্টা করছেন ? আমি মনে করি এই গিটহাব থ্রেডটি আপনার উদ্বেগের সমাধান করে।

— সাদাক

জেএফওয়াই - আমি <a href> অপসারণ করেছি এবং <লিঙ্ক> যুক্ত করেছি যার মধ্যে স্টেট প্রেরণের বিকল্পও রয়েছে, যা পরবর্তী পৃষ্ঠায় এই.প্রোপস.লোকেশন.স্টেটের মাধ্যমে অ্যাক্সেস করা যায়।

— মনোহর রেড্ডি পোরেড্ডি

আপনি দয়া করে একটি উত্তর 'উত্তর' হিসাবে চিহ্নিত করতে পারেন? আমি নিশ্চিত যে লোকেরা টাইপ করতে সময় ব্যয় করে তারা এর প্রশংসা করবে।

— জেমস পৌলস ২৩

Answer 1

প্রথমত, আপনি var r = this;যেমন করবেন না তেমন if statementকলব্যাকের প্রসঙ্গটিকে বোঝায় যেহেতু আপনি তীর ফাংশনটি ব্যবহার করছেন প্রতিক্রিয়া উপাদান উপাদানটিকে বোঝায় to

ডক্স অনুসারে:

ইতিহাসের সামগ্রীতে সাধারণত নিম্নলিখিত বৈশিষ্ট্য এবং পদ্ধতি থাকে:

• দৈর্ঘ্য - (সংখ্যা) ইতিহাসের স্ট্যাকটিতে প্রবেশের সংখ্যা
• ক্রিয়া - (স্ট্রিং) বর্তমান ক্রিয়া (পুশ, রিপ্লেস, বা পিওপি)

• অবস্থান - (অবজেক্ট) বর্তমান অবস্থান। নিম্নলিখিত বৈশিষ্ট্য থাকতে পারে:

  • পথের নাম - (স্ট্রিং) URL এর পথ
  • অনুসন্ধান - (স্ট্রিং) ইউআরএল কোয়েরি স্ট্রিং
  • হ্যাশ - (স্ট্রিং) ইউআরএল হ্যাশ টুকরা
  • state - (স্ট্রিং) অবস্থান-সুনির্দিষ্ট রাজ্য যা এই স্থানটিকে স্ট্যাকের উপরে ধাক্কা দেওয়া হলে ধাক্কা (পথ, রাজ্য) সরবরাহ করা হয়েছিল। কেবল ব্রাউজার এবং মেমরির ইতিহাসে উপলব্ধ।
• পুশ (পথ, [রাষ্ট্র]) - (ফাংশন) ইতিহাসের স্ট্যাকের উপরে একটি নতুন এন্ট্রি ঠেলে দেয়
• প্রতিস্থাপন (পথ, [রাষ্ট্র]) - (ফাংশন) ইতিহাস স্ট্যাকের বর্তমান এন্ট্রি প্রতিস্থাপন করে
• go (n) - (ফাংশন) n এন্ট্রি দ্বারা ইতিহাস স্ট্যাকের পয়েন্টারটি সরায়
• goBack () - (ফাংশন) যেতে সমান (-1)
• goforward () - (ফাংশন) সমান (1)
• block (প্রম্পট) - (ফাংশন) নেভিগেশন রোধ করে

সুতরাং নেভিগেট করার সময় আপনি ইতিহাসের মতো বিষয়গুলিতে প্রপসগুলি পাস করতে পারেন

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

বা একইভাবে Linkউপাদান বা Redirectউপাদান জন্য

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

এবং তারপরে যে অংশটি /templateরুটের সাথে রেন্ডার করা হয় , আপনি সেই মতো প্রসেসগুলি অ্যাক্সেস করতে পারেন

this.props.location.state.detail

এছাড়াও মনে রাখবেন, প্রপস থেকে ইতিহাস বা অবস্থানের বিষয়গুলি ব্যবহার করার সময় আপনাকে উপাদানটি সাথে সংযোগ করতে হবে withRouter।

দস্তাবেজ অনুসারে:

withRouter

আপনি উচ্চতর অর্ডার উপাদানটির <Route>'sমাধ্যমে ইতিহাসের অবজেক্টের বৈশিষ্ট্য এবং নিকটতম মিলটি অ্যাক্সেস পেতে পারেন withRouter। withRouter হবে তার উপাদান প্রত্যেক সময় একই সাজসরঞ্জাম সঙ্গে রুট পরিবর্তন হিসাবে পুনরায় রেন্ডার <Route>রেন্ডার props: { match, location, history }।

Comments

হ্যাঁ, যে কাজ করেছে। ধন্যবাদ! তবে কেন this.props.history.push('/template',response.data)কাজ করছেন তা নিশ্চিত নন। ডক্স অনুসারে push(path, [state]), আপনার কি মনে হয় না এটির কাজ করা উচিত?

— সংকেত প্যাটেল

এর জন্য ধন্যবাদ! আমার ক্ষেত্রে আমি কেবল ইতিহাস সরাসরি পাশ করছিলাম, তাই আমি এই পোষাকগুলিতে এই পৃষ্ঠার সাহায্যে পৌঁছেছি istপরিচিতি.লোকেশন.স্টেট.প্রপনেম -

— নঞ্চকস

@ সংকেতপেটেল আপনার এটি করা দরকার।পড়লগুলি হিস্ট্রি.পশ ('/ টেমপ্লেট', {প্রতিক্রিয়া: প্রতিক্রিয়া.ডাটা})

— আরসালান আহমেদ কোয়েরশি

স্টেট ভেরিয়েবেলে ডেটা দেওয়ার সময় কোনও নতুন ট্যাবে রুটটি খোলা সম্ভব যখন নেভিগেট করার সময় আপনি ইতিহাসের অবজেক্টে প্রপস পাস করতে পারেন?

— গৌরব কুমার

GoBack () সম্পর্কে কি? GoBack () দিয়ে ফিরে নেভিগেট করার সময়, আমি প্রপস.লোকশন বা প্রোপস হিস্টরি.লোকশন কোনও ইতিহাসের রাজ্য দেখতে পাচ্ছি না। পুশ দিয়ে এগিয়ে নেভিগেট করা () এটি

— ঠিকঠাক

Answer 2

তুমি ব্যবহার করতে পার,

this.props.history.push("/template", { ...response }) অথবা this.props.history.push("/template", { response: response })

তারপরে আপনি /templateকোডটি অনুসরণ করে উপাদান থেকে পার্সড ডেটা অ্যাক্সেস করতে পারবেন ,

const state = this.props.location.state

প্রতিক্রিয়া সেশন ইতিহাস পরিচালনা সম্পর্কে আরও পড়ুন

Comments

এই যুক্তিটি আমার জন্য কাজ করেছিল, যখন ইতিহাস.টুকুতে back_url দিয়ে এই চাপ দিন p এবং ল্যান্ডিং পৃষ্ঠায় এটি পেয়ে যাওয়া এই.প্রোপস.লোকেশন.স্টেট.ব্যাক_আর্ল

— যাদব ২

Answer 3

• জন্য আগের সংস্করণের:

  history.push('/path', yourData);

  এবং ঠিক নীচের মতো সম্পর্কিত উপাদানটিতে ডেটা পান:

  this.props.location.state // it is equal to yourData

• জন্য নতুন সংস্করণ উপরে পথ ভাল কাজ করে কিন্তু একটি নতুন উপায় হল:

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

  এবং ঠিক নীচের মতো সম্পর্কিত উপাদানটিতে ডেটা পান:

  this.props.location.customNameData // it is equal to yourData

ইঙ্গিত : stateমূল নামটি পূর্ববর্তী সংস্করণগুলিতে ব্যবহৃত হয়েছিল এবং নতুন সংস্করণগুলির জন্য, আপনি ডেটা পাস করার জন্য আপনার কাস্টম নামটি ব্যবহার করতে পারেন এবং stateনাম ব্যবহার করা অত্যাবশ্যক নয়।

Comments

দয়া করে রেফারেন্সটি ভাগ করুন, যা বলে যে রাজ্যটি প্রয়োজনীয় নয়, যদি আপনার কাছে এটি সহজ হয়

— অক্ষয় বিজয় জৈন

প্রিয় @ অক্ষয় বিজয়জাইন, এটি আমার কোডিংয়ের অভিজ্ঞতা। আমি এই বাক্যটি কোনও ডক বা রেফের ভিত্তিতে লিখিনি।

— আমেরেলিকা

Answer 4

প্রতিক্রিয়া হুক (16.8 এর পরে) ব্যবহারের জন্য সমাধানটি (শুভম খাত্রি দ্বারা প্রস্তাবিত) প্রসারিত করা:

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

ইতিহাসের ধাক্কা সহ পরামিতিগুলি পাস করা:

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

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

'রিএ্যাক্ট-রাউটার-ডোম' থেকে ব্যবহারের অবস্থান ব্যবহার করে পাস করা প্যারামিটারটি অ্যাক্সেস করা:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Comments

আপনাকে অনেক ধন্যবাদ, আপনার উত্তর ব্যতীত কোনও আপডেট বিকল্প পাওয়া যায় নি!

— jamezrin

Answer 5

আপনার যদি ইউআরএল প্যারামগুলি পাস করতে হয়

তার সাইটে টাইলার ম্যাকগিনিসের দুর্দান্ত পোস্টের ব্যাখ্যা রয়েছে, পোস্টটির লিঙ্ক

এখানে কোড উদাহরণ রয়েছে:

1. ইতিহাস.পশ উপাদান:

   this.props.history.push(`/home:${this.state.userID}`)

2. রাউটার উপাদান আপনি রুট সংজ্ঞায়িত:

   <Route path='/home:myKey' component={Home} />

3. হোম উপাদানটিতে:

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

Comments

আমার এর মতো কিছু আছে তবে আমি পৃষ্ঠাটি রিফ্রেশ করলে এটি সম্পূর্ণ ক্র্যাশ হয়ে যায়

— রাবিয়াসিফ

@ আরবিয়াসিফ, কারণ ডেটা আর নেই, আপনার এটি চালিয়ে যাওয়া বা স্থানীয় স্টোরেজে সংরক্ষণ করা দরকার

— ড্রু কর্ডানো

Answer 6

রাউটারের সাথে এটি ব্যবহার করার দরকার নেই। এটি আমার পক্ষে কাজ করে:

আপনার মূল পৃষ্ঠায়,

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

তারপরে কম্পোনেন্টএ বা কম্পোনেন্টবিতে আপনি অ্যাক্সেস করতে পারবেন

this.props.history

এই.পড়গুলি। হিস্টরি.পশ পদ্ধতি সহ বস্তু object

Comments

আমি মনে করি আপনার প্রয়োজন হয়নি withRouterকারণ আপনি আপনার উপাদানটি মোড়ানো করেছেন BrowserRouterযা একই কাজ করে।

— পাই 'ওহ' Pah

হ্যাঁ এবং আপনি propsনীচে প্রতিটি উপাদান মধ্যে যা যা historyপ্রপ অন্তর্ভুক্ত ।

— জেরেমি

Answer 7

ব্যবহার করতে 16.8+ (withHooks) প্রতিক্রিয়া আপনি এভাবে ব্যবহার করতে পারেন

import React from 'react';
import { useHistory } from 'react-router-dom';

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

এখানে উত্স পড়তে আরো https://reacttraining.com/react-router/web/example/auth-workflow

Answer 8

ক্যোয়ারী প্যারামিটারগুলি পেতে তথ্যে যুক্ত করুন।

const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');

URLS SearchParams সম্পর্কে আরও তথ্যের জন্য এই লিঙ্কটি URLS SearchParams দেখুন

Comments

প্রতিক্রিয়া রাউটার 4 এর সাথে এটি মোটেই প্রাসঙ্গিক নয়

— কলবি কক্স