इतिहास के साथ पाराम कैसे पास करें। प्रतिक्रिया-राउटर v4 में push / Link / Redirect?

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 = यह;

— ईशानगर

आप propsउस घटक को पास करने की कोशिश कर रहे हैं जो मार्ग से मेल खाता है? मुझे लगता है कि यह GitHub धागा आपकी चिंता को संबोधित करता है।

— सादिक २३'१

JFYI - मैंने <a href> को हटा दिया है और <Link> जोड़ा है जिसमें राज्य भेजने का विकल्प भी है, जिसे अगले पृष्ठ के माध्यम से एक्सेस किया जा सकता है, यह .props.location.state है।

— मनोहर रेड्डी पोरेड्डी

क्या आप किसी एक उत्तर को 'उत्तर' के रूप में चिह्नित कर सकते हैं। मुझे यकीन है कि टाइपिंग में समय बिताने वाले लोग इसकी सराहना करेंगे।

— जेम्स पॉउलोज

Answer 1

सबसे पहले, तुम क्या जरूरत नहीं है var r = this;के रूप में इस में if statementजो जब से तुम तीर समारोह का उपयोग कर रहे संदर्भित करता घटक संदर्भ प्रतिक्रिया करने के लिए कॉलबैक के संदर्भ को दर्शाता है।

डॉक्स के अनुसार:

इतिहास की वस्तुओं में आमतौर पर निम्नलिखित गुण और विधियाँ होती हैं:

• लंबाई - (संख्या) इतिहास ढेर में प्रविष्टियों की संख्या
• क्रिया - (स्ट्रिंग) वर्तमान क्रिया (PUSH, REPLACE, या POP)

• स्थान - (वस्तु) वर्तमान स्थान। निम्नलिखित गुण हो सकते हैं:

  • pathname - (string) URL का पाथ
  • खोज - (स्ट्रिंग) URL क्वेरी स्ट्रिंग
  • हैश - (स्ट्रिंग) यूआरएल हैश टुकड़ा
  • स्थिति - (स्ट्रिंग) स्थान-विशिष्ट राज्य जो कि इस स्थान को स्टैक पर धकेल दिया गया था, जैसे कि पुश (पथ, राज्य) को प्रदान किया गया था। केवल ब्राउज़र और मेमोरी इतिहास में उपलब्ध है।
• धक्का (पथ, [राज्य]) - (समारोह) इतिहास ढेर पर एक नई प्रविष्टि धक्का
• बदलें (पथ, [राज्य]) - (फ़ंक्शन) इतिहास स्टैक पर वर्तमान प्रविष्टि को प्रतिस्थापित करता है
• go (n) - (फंक्शन) n एंट्रीज़ द्वारा इतिहास स्टैक में पॉइंटर को मूव करता है
• goBack () - (फंक्शन) समतुल्य जाने के लिए (-1)
• goForward () - (फंक्शन) समतुल्य जाने के लिए (1)
• ब्लॉक (शीघ्र) - (फ़ंक्शन) नेविगेशन को रोकता है

इसलिए नेविगेट करते समय आप इतिहास की वस्तु की तरह प्रॉपर पास कर सकते हैं

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]), क्या आपको नहीं लगता कि यह काम करना चाहिए?

— संकेत पटेल

इसके लिए धन्यवाद! मेरे मामले में मैं केवल इतिहास को सीधे पारित कर रहा था, इसलिए मैंने इस के माध्यम से अपने प्रस्ताव को एक्सेस किया। Props.history.location.state.propName -

— Nunchucks

@SanketPatel आपको यह करने की आवश्यकता है। यह है। Props.history.push ('/ टेम्पलेट', {प्रतिक्रिया: response.data})

— अरसलान अहमद कुर्शी

क्या राज्य चर में डेटा पास करते समय एक नए टैब में मार्ग को खोलना संभव है जब नेविगेट करते हुए आप इतिहास ऑब्जेक्ट पर प्रॉपर पास कर सकते हैं?

— गौरव कुमार

GoBack () के बारे में क्या? जब goBack () के साथ वापस नेविगेट करते हैं, तो मैं किसी भी इतिहास के किसी भी राज्य को props.location या props.history.location में नहीं देख सकता। पुश के साथ आगे की ओर नेविगेट करना () यह ठीक काम करता है

— MariusB

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 के साथ push करें। इस स्थिति में ।props.history.push (redirect_url, {back_url: '/ needing_url'}); और इसे लैंडिंग पृष्ठ पर प्राप्त कर रहे हैं। Props.location.state.back_url

— ब्रह्मा देव यादव

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

कृपया संदर्भ साझा करें, जो कहता है कि राज्य आवश्यक नहीं है, यदि आपके पास यह काम है

— अक्षय विजय जैन

प्रिय @AkshayVijayJain, यह कोडिंग का मेरा अनुभव है। मैंने वह वाक्य डॉक या रेफरी पर आधारित नहीं लिखा था।

— अमेरलिसिया

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

अगर आपको URL params पास करना है

अपनी साइट पर टायलर मैकगिनिस द्वारा एक महान पोस्ट स्पष्टीकरण, लिंक को पोस्ट करने के लिए

यहाँ कोड उदाहरण हैं:

1. History.push घटक पर:

   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

मेरे पास ऐसा कुछ है, लेकिन अगर मैं पृष्ठ को ताज़ा करता हूं तो यह पूरी तरह से दुर्घटनाग्रस्त हो जाता है

— रबियाशिया

@rabiaasif क्योंकि डेटा अब नहीं है, आपको इसे

— बनाए

Answer 6

WithRouter का उपयोग करना आवश्यक नहीं है। यह मेरे लिए काम करता है:

आपके मूल पृष्ठ में,

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

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

फिर ComponentA या ComponentB में आप पहुँच सकते हैं

this.props.history

ऑब्जेक्ट, जिसमें यह शामिल है। Props.history.push विधि।

Comments

मुझे लगता है कि आपको इसकी आवश्यकता नहीं थी withRouterक्योंकि आपने अपने घटक के साथ लिपटा था BrowserRouter, जो समान काम करता है।

— 'ओह' पाह

हां और आप 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');

URLSearchParams के बारे में अधिक जानकारी के लिए इस लिंक URLSearchParams की जाँच करें

Comments

यह रिएक्ट राउटर 4 के लिए सभी प्रासंगिक नहीं है

— कोल्बी कॉक्स