राउटर में इतिहास को कैसे धकेलें v4?

Question

रिएक्ट राउटर (v3) के वर्तमान संस्करण में मैं एक सर्वर प्रतिक्रिया को स्वीकार कर सकता हूं और browserHistory.pushउचित प्रतिक्रिया पृष्ठ पर जाने के लिए उपयोग कर सकता हूं । हालाँकि, यह v4 में उपलब्ध नहीं है, और मुझे यकीन नहीं है कि इसे संभालने का उपयुक्त तरीका क्या है।

इस उदाहरण में, Redux का उपयोग करते हुए, घटक / ऐप-उत्पाद-form.js कॉल this.props.addProduct(props)करते हैं जब कोई उपयोगकर्ता प्रपत्र सबमिट करता है। जब सर्वर एक सफलता देता है, तो उपयोगकर्ता को कार्ट पेज पर ले जाया जाता है।

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

मैं रिएक्टर राउटर v4 के लिए फ़ंक्शन से कार्ट पेज पर रीडायरेक्ट कैसे कर सकता हूं?

Comments

बस पिछले प्रस्ताव से इसे जोड़ने के लिए और GitHub पर रिएक्टर राउटर के मुद्दों में सुझावों से, contextजो आपको मैन्युअल रूप से आवश्यक है पास करने के लिए उपयोग करना "नो गो" है। जब तक मैं एक पुस्तकालय लेखक नहीं हूँ, तब तक इसका उपयोग करने की आवश्यकता नहीं होनी चाहिए। दरअसल, फेसबुक इसके खिलाफ सिफारिश करता है।

— क्रिस

@ क्रिस क्या आपको इसके लिए कोई समाधान मिला? मुझे कार्रवाई में एक अलग घटक की ओर धकेलने की जरूरत है, जैसा कि आपने यहां बताया है

— मि।

@ मिस्टर, दुख की बात है कि मैं नहीं। अंतिम बार मैंने पढ़ा था कि रिऐक्ट ट्रेनिंग टीम, जो रिएक्ट राउटर का रखरखाव करती है, में एक रिडक्स पैकेज उपलब्ध है। मुझे यह काम करने का कोई सौभाग्य नहीं मिला है, और उन्होंने इसे हल करने में ज्यादा काम नहीं किया है।

— क्रिस

हम windows.location.href = URL का उपयोग क्यों नहीं कर सकते? क्या URL को बदलने और रीडायरेक्ट करने के लिए इसका उपयोग करने में कुछ गलत है?

— शान

मैं यह नहीं देखता कि क्यों नहीं, लेकिन उपयोग के लिए विकल्प historyरिएक्ट नेटिव के लिए भी एक विकल्प के रूप में काम करता है और साथ ही साथ विरासत ब्राउज़र का समर्थन करने का विकल्प भी है।

— क्रिस

Answer 1

आप historyअपने घटकों के बाहर विधियों का उपयोग कर सकते हैं । निम्नलिखित तरीके से प्रयास करें।

सबसे पहले, इतिहास पैकेज काhistory उपयोग किया गया एक ऑब्जेक्ट बनाएं :

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

फिर इसे लपेटें <Router>( कृपया ध्यान दें , आपको import { Router }इसके बजाय उपयोग करना चाहिए import { BrowserRouter as Router }):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

किसी भी स्थान से अपना वर्तमान स्थान बदलें, उदाहरण के लिए:

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push('/');
      });
  };
}

---

UPD : आप React Router FAQ में थोड़ा अलग उदाहरण देख सकते हैं ।

Comments

मैंने ठीक वैसा ही करने की कोशिश की है जैसा @OlegBelostotsky ने कहा था, लेकिन उसके बाद history.push('some path'), URL बदल जाता है लेकिन पेज नहीं बदलता है। मुझे window.location.reload()अपने कोड के कुछ हिस्सों में इसे काम करने के लिए लगाना होगा। हालाँकि, एक उदाहरण में मुझे redux स्टेट ट्री रखना है, और पुनः लोड करने से यह नष्ट हो जाता है। कोई और उपाय?

— sdabrutas

@idunno withRouterउच्च-क्रम घटक का उपयोग करने का प्रयास करें ।

— ओलेग बेलोस्टोट्स्की

इसने मुझे एक त्रुटि बताते हुए कहा: createBrowserHistory एक फ़ंक्शन नहीं है। मैं क्या कर सकता हूँ?

— AKJ

@AKJ शायद import createHistory from 'history/createBrowserHistory'; export default createHistory();काम होगा।

— बजे ओलेग बेलोस्टोटस्की

नीचे के लिए क्षमा करें :)। जबकि यह भी काम करना चाहिए, इसे संभालने का सही तरीका क्रिस ने कैसे उत्तर दिया: stackoverflow.com/a/42716055/491075 ।

— gion_13

Answer 2

प्रतिक्रिया रूटर v4 मौलिक रूप से v3 (और पहले) से अलग है और आप browserHistory.push()वैसा नहीं कर सकते जैसा आप करते थे।

यदि आप अधिक जानकारी चाहते हैं तो यह चर्चा संबंधित है:

• नया बनाने से browserHistoryकाम नहीं चलेगा क्योंकि <BrowserRouter>इसका अपना इतिहास उदाहरण बनता है, और उस पर होने वाले बदलावों के बारे में सुनता है। इसलिए एक अलग उदाहरण url को बदल देगा, लेकिन अपडेट नहीं करेगा <BrowserRouter>।
• browserHistory केवल v2 में v4 में प्रतिक्रिया-राउटर द्वारा उजागर नहीं किया जाता है।

---

इसके बजाय आपके पास ऐसा करने के लिए कुछ विकल्प हैं:

• withRouterउच्च-क्रम घटक का उपयोग करें

  इसके बजाय आपको withRouterउच्च आदेश घटक का उपयोग करना चाहिए , और उस घटक को लपेटें जो इतिहास को धक्का देगा। उदाहरण के लिए:

  import React from "react";
  import { withRouter } from "react-router-dom";
  
  class MyComponent extends React.Component {
    ...
    myFunction() {
      this.props.history.push("/some/Path");
    }
    ...
  }
  export default withRouter(MyComponent);

  की जाँच करें आधिकारिक दस्तावेज अधिक जानकारी के लिए:

  आप करने के लिए उपयोग कर सकते हैं historyऔर निकटतम ऑब्जेक्ट के गुणों <Route>'s matchwithRouter उच्च क्रम घटक के माध्यम से। साथ ही राउटर अपने घटक को हर बार <Route>रेंडर प्रॉप्स के रूप में समान प्रॉप्स के साथ बदल देगा { match, location, history }।

---

• contextएपीआई का उपयोग करें

  संदर्भ का उपयोग करना सबसे आसान समाधानों में से एक हो सकता है, लेकिन एक प्रयोगात्मक एपीआई होने के नाते यह अस्थिर और असमर्थित है। इसका इस्तेमाल तभी करें जब बाकी सब फेल हो जाए। यहाँ एक उदाहरण है:

  import React from "react";
  import PropTypes from "prop-types";
  
  class MyComponent extends React.Component {
    static contextTypes = {
      router: PropTypes.object
    }
    constructor(props, context) {
       super(props, context);
    }
    ...
    myFunction() {
      this.context.router.history.push("/some/Path");
    }
    ...
  }

  पर एक नज़र डालें आधिकारिक दस्तावेज संदर्भ पर:

  यदि आप चाहते हैं कि आपका एप्लिकेशन स्थिर रहे, तो संदर्भ का उपयोग न करें। यह एक प्रायोगिक एपीआई है और यह भविष्य के रिएक्ट के रिलीज में टूटने की संभावना है।

  यदि आप इन चेतावनियों के बावजूद संदर्भ का उपयोग करने पर जोर देते हैं, तो अपने संदर्भ के उपयोग को एक छोटे से क्षेत्र में अलग करने का प्रयास करें और जब संभव हो तो सीधे संदर्भ एपीआई का उपयोग करने से बचें, ताकि एपीआई बदलते समय इसे अपग्रेड करना आसान हो।

Comments

हां मैंने कोशिश की थी। पूछने के लिए धन्यवाद। :-) तो आपको इस एक्शन फंक्शन में संदर्भ कैसे मिलेगा? अब तक, यह अपरिभाषित के रूप में आ रहा है।

— क्रिस

मैं अभी कुछ दिनों से इस विषय पर शोध कर रहा हूं और काम करने के लिए इसे प्राप्त नहीं कर पाया हूं। यहां तक ​​कि ऊपर के उदाहरण का उपयोग करते हुए भी मुझे लगता है कि राउटर को संदर्भ में अपरिभाषित रखा गया है। मैं वर्तमान में प्रतिक्रिया v15.5.10, प्रतिक्रिया-रूटर-डोम v4.1.1, प्रोप-प्रकार 15.5.10 का उपयोग कर रहा हूं। इसके आस-पास का दस्तावेज विरल है और बहुत स्पष्ट नहीं है।

— स्टू

@ यह काम करना चाहिएthis.context.router.history.push('/path');

— तुषार

@ क्रिस वास्तव में, यदि आप इतिहास वस्तु को पलटने की कोशिश करते हैं और इसे अपने द्वारा उपयोग करते हैं तो यह यूआरएल को बदल देगा लेकिन घटक को रेंडर नहीं करेगा - जैसा कि आपने ऊपर उल्लेख किया है। लेकिन, घटक और बल घटक के रूप में अच्छी तरह से बाहर "history.push" का उपयोग कैसे करें?

— कूल

यह उस प्रश्न का उत्तर नहीं देता है जो पूछा जा रहा है कि कैसे एक घटक के इतिहास.पुष को एक्सेस करें। किसी घटक के बाहर होने पर, राउटर या संदर्भ का उपयोग करना विकल्प नहीं है।

— सनशाइनडॉयल

Answer 3

अब प्रतिक्रिया-राउटर v5 के साथ आप इस तरह का उपयोग कर सकते हैंहाइस्टर जीवन चक्र हुक:

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://reacttraining.com/react-router/web/api/Hooks/usehistory

Comments

यह एक बहुत स्वागत योग्य अद्यतन है! धन्यवाद!

— क्रिस

क्या मुझे इसे स्थापित करने की आवश्यकता है कोई विशिष्ट तरीका है, मैं निम्नलिखित को कॉल कर रहा हूं, let history = useHistory();लेकिन एक Object is not callableत्रुटि हो रही है , जब मैंने console.log(useHistory)यह देखने की कोशिश की कि यह किस प्रकार का उपयोग करता है यह अपरिभाषित दिखाता है। का उपयोग कर"react-router-dom": "^5.0.1"

— steff_bdh

@steff_bdh को आपको इसे yout package.json फ़ाइल में "रिएक्ट-राउटर-डोम" में अपडेट करना होगा: "^ 5.0.1" और 'npm install' चलाएं

— Hadi Abu

अच्छा है, लेकिन Redux एक्शन क्लासेस के अंदर हुक का उपयोग नहीं कर सकते क्योंकि वे रिएक्ट कंपोनेंट / फंक्शन नहीं हैं

— Jay

आप इसका उपयोग लॉगिन (async) पर पुनर्निर्देशन के लिए कैसे करेंगे। यहाँ सवाल => stackoverflow.com/questions/62154408/…

— theairbend3r

Answer 4

React Router 4 में सबसे सरल तरीका है

this.props.history.push('/new/url');

लेकिन इस पद्धति का उपयोग करने के लिए, आपके मौजूदा घटक में historyऑब्जेक्ट तक पहुंच होनी चाहिए । हम तक पहुँच सकते हैं

1. यदि आपका घटक Routeसीधे जुड़ा हुआ है , तो आपके घटक में पहले से ही historyऑब्जेक्ट तक पहुंच है ।

   उदाहरण के लिए:

   <Route path="/profile" component={ViewProfile}/>

   यहां ViewProfileतक पहुंच है history।

2. यदि Routeसीधे नहीं जुड़ा है ।

   उदाहरण के लिए:

   <Route path="/users" render={() => <ViewUsers/>}

   फिर हमें withRouterमौजूदा कंपोनेंट को गर्म करने के लिए एक हेगर ऑर्डर फ़िक्शन का उपयोग करना होगा।

   अंदर का ViewUsers घटक

   • import { withRouter } from 'react-router-dom';

   • export default withRouter(ViewUsers);

   अब यह है, आपके ViewUsersघटक को historyऑब्जेक्ट तक पहुंच है ।

अपडेट करें

2- इस परिदृश्य में, propsअपने घटक के लिए सभी मार्ग पास करें, और फिर हम this.props.historyघटक से एक्सेस कर सकते हैं यहां तक ​​कि बिनाHOC

उदाहरण के लिए:

<Route path="/users" render={props => <ViewUsers {...props} />}

Comments

अति उत्कृष्ट! आपके दूसरे तरीके ने भी मेरे लिए चाल चली, क्योंकि मेरे घटक (जिसे एक्सेस की आवश्यकता है this.props.history) एक एचओसी से आता है, जिसका अर्थ है कि यह सीधे तौर पर जुड़ा हुआ नहीं है Route, जैसा कि आप समझाते हैं।

— cjauvin

Answer 5

मैंने इस तरह से इसे किया:

import React, {Component} from 'react';

export default class Link extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
    }
    onLogout() {
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Your Links</h1>
                <button onClick={this.onLogout}>Logout</button>
            </div>
        );
    }
}

this.props.history.push('/cart');कार्ट पेज पर रीडायरेक्ट करने के लिए उपयोग करें इसे इतिहास ऑब्जेक्ट में सहेजा जाएगा।

आनंद लें, माइकल।

Comments

हां, ऐसा लग रहा है कि घटकों के भीतर आप ठीक-ठाक धक्का दे सकते हैं। एक घटक के बाहर नेविगेट करने को प्रभावित करने का एकमात्र तरीका पुनर्निर्देशित है।

— क्रिस

यह उस प्रश्न का उत्तर नहीं देता है जो पूछा जा रहा है कि कैसे एक घटक के इतिहास.पुष को एक्सेस करें। घटक के बाहर होने पर .props.history का उपयोग करना एक विकल्प नहीं है।

— सनशाइनडॉयल

Answer 6

रिएक्ट राउटर v4 प्रलेखन के अनुसार - Redux डीप इंटीग्रेशन सत्र

गहन एकीकरण की आवश्यकता है:

"प्रेषण क्रिया द्वारा नेविगेट करने में सक्षम हो"

हालांकि, वे इस दृष्टिकोण को "गहन एकीकरण" के विकल्प के रूप में सुझाते हैं:

"नेविगेट करने के लिए प्रेषण क्रियाओं के बजाय, आप अपने कार्यों के लिए मार्ग घटकों को प्रदान की गई इतिहास वस्तु को पास कर सकते हैं और वहां उसके साथ नेविगेट कर सकते हैं।"

तो आप अपने घटक को withRouter उच्च क्रम घटक के साथ लपेट सकते हैं:

export default withRouter(connect(null, { actionCreatorName })(ReactComponent));

जो प्रॉप्स के लिए इतिहास एपीआई पास करेगा। तो आप इतिहास को पारित करने वाले एक्शन निर्माता को परम कह सकते हैं। उदाहरण के लिए, अपने ReactComponent के अंदर:

onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

फिर, अपने कार्यों / index.js के अंदर:

export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}

Answer 7

गंदा सवाल, मुझे काफी समय लगा, लेकिन आखिरकार, मैंने इसे इस तरह से हल किया:

अपने कंटेनर को लपेटें withRouterऔर mapDispatchToPropsफ़ंक्शन में अपनी कार्रवाई के लिए इतिहास पास करें । कार्रवाई में इतिहास .push ('/ url') को नेविगेट करने के लिए।

क्रिया:

export function saveData(history, data) {
  fetch.post('/save', data)
     .then((response) => {
       ...
       history.push('/url');
     })
};

कंटेनर:

import { withRouter } from 'react-router-dom';
...
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    save: (data) => dispatch(saveData(ownProps.history, data))}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container));

यह React Router v4.x के लिए मान्य है ।

Comments

धन्यवाद, आपका withRouter समाधान टाइपस्क्रिप्ट के साथ काम करता है, लेकिन पहले से import { createBrowserHistory } from 'history' किसी भी विचार के साथ तुलना में इसकी धीमी गति कृपया?

— जय

Answer 8

this.context.history.push काम नहीं करेगा।

मैं इस तरह काम करने में कामयाब रहा:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

    if (this.props.auth.success) {
        this.context.router.history.push("/some/Path")
    }

}

Comments

यह उस प्रश्न का उत्तर नहीं देता है जो पूछा जा रहा है कि कैसे एक घटक के इतिहास.पुष को एक्सेस करें। इस का उपयोग करना। घटक के बाहर होने पर एक विकल्प नहीं है।

— सनशाइनडॉयल

Answer 9

इस स्थिति में आप अपने थंक को सहारा दे रहे हैं। तो आप बस कॉल कर सकते हैं

props.history.push('/cart')

यदि यह ऐसा मामला नहीं है, तो आप अपने घटक से इतिहास पारित कर सकते हैं

export function addProduct(data, history) {
  return dispatch => {
    axios.post('/url', data).then((response) => {
      dispatch({ type: types.AUTH_USER })
      history.push('/cart')
    })
  }
}

Answer 10

मैं किसी और के लिए योग्य होने के मामले में एक और समाधान प्रदान करता हूं।

मेरे पास एक history.jsफ़ाइल है जहाँ मेरे पास निम्नलिखित हैं:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history

अगला, अपने रूट पर जहां मैं अपने राउटर को परिभाषित करता हूं मैं निम्नलिखित का उपयोग करता हूं:

import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'

export default class Root extends React.Component {
  render() {
    return (
     <Provider store={store}>
      <Router history={history}>
       <Switch>
        ...
       </Switch>
      </Router>
     </Provider>
    )
   }
  }

अंत में, actions.jsमैं अपने इतिहास को आयात करता हूं और पुशलेटर का उपयोग करता हूं

import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)

इस तरह, मैं एपीआई कॉल के बाद नए कार्यों को आगे बढ़ा सकता हूं।

आशा है ये मदद करेगा!

Answer 11

यदि आप Redux का उपयोग कर रहे हैं, तो मैं npm पैकेज प्रतिक्रिया-राउटर- रेडक्स का उपयोग करने की सलाह दूंगा । यह आपको Redux स्टोर नेविगेशन क्रियाओं को भेजने की अनुमति देता है।

आपको उनके Readme फ़ाइल में वर्णित स्टोर बनाना होगा ।

सबसे आसान उपयोग मामला:

import { push } from 'react-router-redux'

this.props.dispatch(push('/second page'));

कंटेनर / घटक के साथ दूसरा उपयोग मामला:

कंटेनर:

import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import Form from '../components/Form';

const mapDispatchToProps = dispatch => ({
  changeUrl: url => dispatch(push(url)),
});

export default connect(null, mapDispatchToProps)(Form);

घटक:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Form extends Component {
  handleClick = () => {
    this.props.changeUrl('/secondPage');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}/>
      </div>Readme file
    );
  }
}

Comments

यह प्रतिक्रिया-राउटर-रेडक्स के साथ काम नहीं करता है जब तक कि आप nextसंस्करण का उपयोग नहीं कर रहे हैं , जो अभी भी इस समय विकास के अधीन है!

— मेंढकवास

Answer 12

मैं का उपयोग करके यह पूरा करने में सक्षम था bind()। मैं एक बटन क्लिक करना चाहता था index.jsx, सर्वर पर कुछ डेटा पोस्ट करता था, प्रतिक्रिया का मूल्यांकन करता था, और करने के लिए पुनर्निर्देशित करता था success.jsx। यहाँ है कि मैं कैसे काम किया ...

index.jsx:

import React, { Component } from "react"
import { postData } from "../../scripts/request"

class Main extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.postData = postData.bind(this)
    }

    handleClick() {
        const data = {
            "first_name": "Test",
            "last_name": "Guy",
            "email": "[e-mail]"
        }

        this.postData("person", data)
    }

    render() {
        return (
            <div className="Main">
                <button onClick={this.handleClick}>Test Post</button>
            </div>
        )
    }
}

export default Main

request.js:

import { post } from "./fetch"

export const postData = function(url, data) {
    // post is a fetch() in another script...
    post(url, data)
        .then((result) => {
            if (result.status === "ok") {
                this.props.history.push("/success")
            }
        })
}

success.jsx:

import React from "react"

const Success = () => {
    return (
        <div className="Success">
            Hey cool, got it.
        </div>
    )
}

export default Success

तो जुड़ कर thisकरने के लिए postDataमें index.jsx, मैं पहुँच पा रहा था this.props.historyमें request.js... तो मैं विभिन्न घटकों में इस समारोह का पुन: उपयोग कर सकते हैं, बस यकीन है कि मुझे शामिल करना न भूलें करना है this.postData = postData.bind(this)में constructor()।

Answer 13

यहाँ मेरी हैक है (यह मेरी रूट-स्तरीय फ़ाइल है, इसमें थोड़ा रेडॉक्स मिलाया गया है - हालाँकि मैं उपयोग नहीं कर रहा हूँ react-router-redux):

const store = configureStore()
const customHistory = createBrowserHistory({
  basename: config.urlBasename || ''
})

ReactDOM.render(
  <Provider store={store}>
    <Router history={customHistory}>
      <Route component={({history}) => {
        window.appHistory = history
        return (
          <App />
        )
      }}/>
    </Router>
  </Provider>,
  document.getElementById('root')
)

मैं तब window.appHistory.push()कहीं भी उपयोग कर सकता हूं जो मैं चाहता हूं (उदाहरण के लिए, मेरे Redux स्टोर फ़ंक्शंस / थ्रक्स / सागा, आदि में) मैंने आशा की थी कि मैं बस उपयोग कर सकता हूं window.customHistory.push()लेकिन किसी कारण से react-routerकभी भी अपडेट नहीं लगता था, हालांकि यूआरएल बदल गया था। लेकिन इस तरह मेरे पास EXACT react-routerका उपयोग है। मुझे वैश्विक दायरे में सामान रखना पसंद नहीं है, और यह उन कुछ चीजों में से एक है, जिनके साथ मैं ऐसा करूँगा। लेकिन यह किसी भी अन्य विकल्प से बेहतर है जिसे मैंने IMO देखा है।

Answer 14

कॉलबैक का उपयोग करें। यह मेरे लिए काम किया!

export function addProduct(props, callback) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
    .then(response => {
    dispatch({ type: types.AUTH_USER });
    localStorage.setItem('token', response.data.token);
    callback();
  });
}

घटक में, आपको बस कॉलबैक जोड़ना होगा

this.props.addProduct(props, () => this.props.history.push('/cart'))

Answer 15

इसलिए जिस तरह से मैं यह कर रहा हूं वह है: - उपयोग करने के बजाय पुनर्निर्देशित करने के बजाय history.push, मैं बस Redirectघटक का उपयोग करता हूं react-router-dom इस घटक का उपयोग करते समय आप बस पास हो सकते हैं push=true, और यह बाकी का ख्याल रखेगा

import * as React from 'react';
import { Redirect } from 'react-router-dom';
class Example extends React.Component {
  componentDidMount() {
    this.setState({
      redirectTo: '/test/path'
    });
  }

  render() {
    const { redirectTo } = this.state;

    return <Redirect to={{pathname: redirectTo}} push={true}/>
  }
}

Comments

यह सही है जो प्रतिक्रिया चक्र को तोड़ता नहीं है

— jzqa

Answer 16

प्रतिक्रिया रूटर V4 अब इतिहास प्रोप को नीचे के रूप में उपयोग करने की अनुमति देता है:

this.props.history.push("/dummy",value)

तब मान को एक्सेस किया जा सकता है, जहां स्थान प्रोप उपलब्ध है state:{value}घटक के रूप में नहीं।

Comments

यह उस प्रश्न का उत्तर नहीं देता है जो पूछा जा रहा है कि कैसे एक घटक के इतिहास.पुष को एक्सेस करें। घटक के बाहर होने पर .props.history का उपयोग करना एक विकल्प नहीं है।

— Arkady

Answer 17

आप इसे इस तरह से उपयोग कर सकते हैं जैसे कि मैं इसे लॉगिन और मैनी के लिए करता हूं

class Login extends Component {
  constructor(props){
    super(props);
    this.login=this.login.bind(this)
  }


  login(){
this.props.history.push('/dashboard');
  }


render() {

    return (

   <div>
    <button onClick={this.login}>login</login>
    </div>

)

Answer 18

/*Step 1*/
myFunction(){  this.props.history.push("/home"); }
/**/
 <button onClick={()=>this.myFunction()} className={'btn btn-primary'}>Go 
 Home</button>

Comments

किसी भी आयात के लिए कोई ज़रूरत नहीं है!

— डेविड बगदासियन

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, क्यों और / या इस कोड के उत्तर के बारे में अतिरिक्त संदर्भ प्रदान करने से प्रश्न इसके दीर्घकालिक मूल्य में सुधार करता है।

— रोलस्टूफ़्लोरहेयर

Answer 19

एक कदम Router में अपने एप्लिकेशन को लपेटें

import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

अब मेरा पूरा App BrowserRouter तक पहुंच जाएगा। चरण दो मैं रूट आयात करता हूं और फिर उन प्रॉपर को पास करता हूं। शायद आपकी मुख्य फ़ाइलों में से एक में।

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

//lots of code here

//somewhere in my render function

    <Route
      exact
      path="/" //put what your file path is here
      render={props => (
      <div>
        <NameOfComponent
          {...props} //this will pass down your match, history, location objects
        />
      </div>
      )}
    />

अब अगर मैं अपने कंपोनेंट js फाइल में कंसोल.लॉग (this.props) चलाता हूं कि मुझे कुछ ऐसा मिलना चाहिए जो इस तरह दिखता हो

{match: {…}, location: {…}, history: {…}, //other stuff }

चरण 2 मैं अपना स्थान बदलने के लिए इतिहास वस्तु तक पहुँच सकता हूँ

//lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") // then put in whatever url you want to go to

इसके अलावा, मैं सिर्फ एक कोडिंग बूटकैम्प छात्र हूं, इसलिए मैं कोई विशेषज्ञ नहीं हूं, लेकिन मुझे पता है कि आप भी इसका उपयोग कर सकते हैं

window.location = "/" //wherever you want to go

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

Answer 20

Routerअपने साथ एक रिवाज बनाएँ browserHistory:

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const ExtBrowserRouter = ({children}) => (
  <Router history={history} >
  { children }
  </Router>
);

export default ExtBrowserRouter

इसके बाद, अपने रूट पर जहां आप अपने को परिभाषित करते हैं Router, निम्नलिखित का उपयोग करें:

import React from 'react';       
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';

//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter'; 
...

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ExtBrowserRouter>
          <Switch>
            ...
            <Route path="/login" component={Login}  />
            ...
          </Switch>
        </ExtBrowserRouter>
      </Provider>
    )
  }
}

अंत में, आयात करें historyजहां आपको इसकी आवश्यकता है और इसका उपयोग करें:

import { history } from '../routers/ExtBrowserRouter';
...

export function logout(){
  clearTokens();      
  history.push('/login'); //WORKS AS EXPECTED!
  return Promise.reject('Refresh token has expired');
}

Answer 21

यदि आप किसी कंपोनेंट के प्रॉप की वैल्यू के रूप में फंक्शन पास करते समय हिस्ट्री का उपयोग करना चाहते हैं, तो राउटर-राउटर 4 के साथ आप कंपोनेंट historyके रेंडर विशेषता में प्रोप को नष्ट कर सकते हैं <Route/>और फिर उपयोग कर सकते हैंhistory.push()

    <Route path='/create' render={({history}) => (
      <YourComponent
        YourProp={() => {
          this.YourClassMethod()
          history.push('/')
        }}>
      </YourComponent>
    )} />

नोट: इसे काम करने के लिए आपको अपने रूट कंपोनेंट (जैसे जो index.js में हो सकता है) के आसपास रिएक्ट राउटर के ब्राउजर राउटर को लपेटना चाहिए।