प्रतिक्रिया-राउटर एक पृष्ठ वापस जाता है आप इतिहास को कैसे कॉन्फ़िगर करते हैं?

121

क्या कोई मुझे बता सकता है कि मैं एक विशिष्ट मार्ग के बजाय पिछले पृष्ठ पर वापस कैसे जा सकता हूं?

इस कोड का उपयोग करते समय:

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

यह त्रुटि प्राप्त करें, goBack () को नजरअंदाज कर दिया गया था क्योंकि कोई राउटर इतिहास नहीं है

यहाँ मेरे मार्ग हैं:

// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;

var routes = (
 <Route name="app" path="/" handler={OurSchoolsApp}>
     <DefaultRoute name="home" handler={HomePage} />
     <Route name="add-school" handler={AddSchoolPage}  />
     <Route name="calendar" handler={CalendarPage}  />
     <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
     <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
     <Route name="info" handler={InfoPage} />
     <Route name="news" handler={NewsListPage} />
     <Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
     <Route name="contacts" handler={ContactPage} />
     <Route name="contact-detail" handler={ContactDetailPage} />
     <Route name="settings" handler={SettingsPage} />
 </Route>
 );

 Router.run(routes, function(Handler){
   var mountNode = document.getElementById('app');
   React.render(<Handler /> , mountNode);
 });
javascript  reactjs  react-router 
— बमवर्षक
स्रोत
यदि आपको कोई समाधान मिल गया है, तो कृपया आप इसे यहाँ साझा कर सकते हैं। धन्यवाद।
— user261002

जवाबों:

43

मुझे लगता है कि आपको अपने राउटर पर BrowserHistory को उसी तरह से सक्षम करने की आवश्यकता है: <Router history={new BrowserHistory}> :।

इससे पहले, आप की आवश्यकता चाहिए BrowserHistoryसे'react-router/lib/BrowserHistory'

मुझे आशा है कि वह मदद करेंगे !

अद्यतन: ES6 में उदाहरण

const BrowserHistory = require('react-router/lib/BrowserHistory').default;

const App = React.createClass({
    render: () => {
        return (
            <div><button onClick={BrowserHistory.goBack}>Go Back</button></div>
        );
    }
});

React.render((
    <Router history={BrowserHistory}>
        <Route path="/" component={App} />
    </Router>
), document.body);
— Ghislaindj
स्रोत
नमस्ते, हम एक ही समस्या का सामना कर रहे हैं। क्या आप अधिक विवरण में बता सकते हैं। धन्यवाद
— 15:26 पर user261002
23
यह सही उत्तर कैसे है? यह भी सवाल का जवाब नहीं है। @ बम्बर
— जीएन।
14
इसे पढ़ने वाले किसी के लिए भी। अगर आप चाइल्ड कंपोनेंट से ऐसा करना चाहते हैं। आप पर इतिहास वस्तु पा सकते हैं this.props.history। तो, कोड बन जाता हैthis.props.history.goBack
— सिसिर
3
प्रतिक्रिया-राउटर 4 के बारे में कैसे? मुझे नहीं लगता कि यह BrowserHistory का समर्थन करता है।
— अक्षय लोकुर
1
प्रतिक्रिया-राउटर-डोम संस्करण 5 के अनुसार, इतिहास BrowserRouter द्वारा अंतर्निहित रूप से बनाया गया है और प्रॉप्स के माध्यम से उपलब्ध है, आप इसे props.history के माध्यम से एक्सेस कर सकते हैं।
— श्रीकांत कयथम
97

React v16 और ReactRouter v4.2.0 (अक्टूबर 2017) से अपडेट करें:

class BackButton extends Component {
  static contextTypes = {
    router: () => true, // replace with PropTypes.object if you use them
  }

  render() {
    return (
      <button
        className="button icon-left"
        onClick={this.context.router.history.goBack}>
          Back
      </button>
    )
  }
}

React v15 और ReactRouter v3.0.0 (अगस्त 2016) से अपडेट करें:

var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button
        className="button icon-left"
        onClick={browserHistory.goBack}>
        Back
      </button>
    );
  }
});

एक एम्बेडेड iframe के साथ थोड़ा और अधिक जटिल उदाहरण के साथ एक फिडेल बनाया गया: https://jsfiddle.net/kwg1da3a/

प्रतिक्रिया v14 और ReacRouter v1.0.0 (10 सितंबर, 2015)

तुम यह केर सकते हो:

var React = require("react");
var Router = require("react-router");

var SomePage = React.createClass({
  ...

  contextTypes: {
    router: React.PropTypes.func
  },
  ...

  handleClose: function () {
    if (Router.History.length > 1) {
      // this will take you back if there is history
      Router.History.back();
    } else {
      // this will take you to the parent route if there is no history,
      // but unfortunately also add it as a new route
      var currentRoutes = this.context.router.getCurrentRoutes();
      var routeName = currentRoutes[currentRoutes.length - 2].name;
      this.context.router.transitionTo(routeName);
    }
  },
  ...

आपको सावधान रहने की आवश्यकता है कि आपके पास वापस जाने के लिए आवश्यक इतिहास है। यदि आप पृष्ठ को सीधे हिट करते हैं और फिर वापस हिट करते हैं तो यह आपके ऐप से पहले आपको ब्राउज़र इतिहास में वापस ले जाएगा।

यह समाधान दोनों परिदृश्यों का ध्यान रखेगा। हालाँकि, यह एक iframe को हैंडल नहीं करेगा जो पेज के भीतर नेविगेट कर सकता है (और ब्राउज़र इतिहास में जोड़ें), बैक बटन के साथ। सच कहूँ तो, मुझे लगता है कि प्रतिक्रिया-राउटर में एक बग है। यहाँ बनाया गया मुद्दा: https://github.com/rackt/react-router/issues/1874

— mlunoe
स्रोत
अच्छा होगा यदि संदर्भ का उपयोग किए बिना ऐसा करने का कोई तरीका था?
— एडम डी।
1
इसके अलावा, सेटअप के आधार पर, इस का उपयोग किया जा सकता है। इस के बजाय p.ps.s.history.goBack.context.router.history.goBack
— फोनिक्सबी
54

  1. आयात withRouter

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

  2. अपने घटक को इस रूप में निर्यात करें:

    export withRouter(nameofcomponent)

  3. उदाहरण के लिए, बटन क्लिक पर, कॉल करें goBack:

    <button onClick={this.props.history.goBack}>Back</button>

पर परीक्षण किया गया react-router-domv4.3

— गौरव मकवाना
स्रोत
2
BTW यह आयात या उपयोग किए बिना भी मेरे लिए काम करता है withRouter। हो सकता है कि हम केवल ब्राउज़र इतिहास देशी API का उपयोग कर रहे हों। लेकिन क्या यह ठीक है ??
— जियानफ्रेंको पी।
1
यह अच्छा उपाय है। एकमात्र समस्या जब उपयोगकर्ता सीधे URL का उपयोग करके पृष्ठ पर पहुंचता है -> यह ऐप को तोड़ देगा क्योंकि इसमें इतिहास नहीं है।
— स्काईवेट्स
2
सबसे अच्छा स्पष्टीकरण यहाँ
— Z_z_Z
@MichaelFreidgeim क्या आप अपना कोड स्निपेट अपलोड कर सकते हैं, इसलिए मैं जाँच करूँगा और सत्यापित
— करूँगा
43 
this.context.router.goBack()

कोई नेविगेशन मिक्सिन की आवश्यकता नहीं है!

— ahhhhhhhhhhhhhhhhhhhhhhhhhhhhh
स्रोत
1
यह अभी भी React Router v4 में काम करता है, लेकिन यह है this.context.router.history.goBack। (+ इतिहास)
— बेन गोटोव
13
प्रतिक्रिया-राउटर-डोम के साथ: "v4.2.2" और import { withRouter } from 'react-router-dom';साथ काम करता हैthis.props.history.goBack();
— felansu
1
@ felansu के आप के रूप में भी जवाब में बताया गया है की जरूरत है अपने घटक withRouter निर्यात करने के लिए टिप्पणी के अलावा stackoverflow.com/a/49130220/3123338
— मिस्टर क्यू
32

ईएस 6 विधि प्रतिक्रिया-राउटर, स्टेटलेस फ़ंक्शन का उपयोग करके मिश्रण के बिना।

import React from 'react'
import { browserHistory } from 'react-router'

export const Test = () => (
  <div className="">
    <button onClick={browserHistory.goBack}>Back</button>
  </div>
)
— ptorsson
स्रोत
3
मुझे आपके समाधान की कोशिश करते समय एक ब्राउज़र चेतावनी मिलती है:export 'browserHistory' was not found in 'react-router'
— राल्फ डेविड एबरनेथी
2
BrowserHistory केवल v2 और v3 में मौजूद है। यदि आप v4 का उपयोग करते हैं, तो आपको माइग्रेशन गाइड पढ़ना चाहिए: github.com/ReactTraining/react-router/blob/…
— ptorsson
@Ralp, अगर आपको यह त्रुटि संदेश मिलता है, तो इसे देखें: stackoverflow.com/questions/49787659/…
— Miles M.
13

रिएक्ट हुक का उपयोग करना

आयात:

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

स्टेटलेस घटक में: 

  let history = useHistory();

घटना पर

history.goBack()
— एरिक रॉबर्टो
स्रोत
<बटन onClick = {() => history.goBack ()}> बैक </ बटन>
— हंटर
इसका उल्लेख करने के लिए धन्यवाद क्योंकि मुझे हुक पसंद हैं। मैं अब तक withRouter का उपयोग कर रहा हूं।
— न्यूमैन
10

प्रतिक्रियाशील-राउटर v4 लाइव उदाहरण के साथ रिएक्ट 16.0 का उपयोग करके मेरे काम करने के उदाहरण को देखें । कोड Github की जाँच करें

का उपयोग करें withRouterऔरhistory.goBack()

यह विचार है जिसे मैं लागू कर रहा हूं ...

History.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './App.css'


class History extends Component {

  handleBack = () => {
    this.props.history.goBack()
  }

  handleForward = () => {
    console.log(this.props.history)
    this.props.history.go(+1)
  }

  render() {
    return <div className="container">
      <div className="row d-flex justify-content-between">
        <span onClick={this.handleBack} className="d-flex justify-content-start button">
          <i className="fas fa-arrow-alt-circle-left fa-5x"></i>
        </span>
        <span onClick={this.handleForward} className="d-flex justify-content-end button">
          <i className="fas fa-arrow-alt-circle-right fa-5x"></i>
        </span>
      </div>
    </div>
  }
}

export default withRouter(History)

PageOne.js

import React, { Fragment, Component } from 'react'

class PageOne extends Component {

   componentDidMount(){
      if(this.props.location.state && this.props.location.state.from != '/pageone')
      this.props.history.push({
         pathname: '/pageone',
         state: { 
             from: this.props.location.pathname
         }
       });
   }

   render() {
      return (
         <Fragment>
            <div className="container-fluid">
               <div className="row d-flex justify-content-center">
                  <h2>Page One</h2>
               </div>
            </div>
         </Fragment>
      )
   }
}

export default PageOne

पीएस खेद कोड यह सब यहाँ पोस्ट करने के लिए बड़ा है

— मॉरिस एस
स्रोत
1
यह '19 के रूप में स्वीकृत उत्तर होना चाहिए। रिएक्ट राउटर एक उच्च क्रम घटक (एचओसी) प्रदान करता है जिसे "विथ राउटर" कहा जाता है ताकि आप इतिहास और स्थान जैसे प्रॉप्स तक पहुंच के लिए अपने घटक को लपेट सकें।
1
हाँ जैसा कि आपके घटक भाग को लपेटने में HOC में withRouter, इतिहास और स्थान डेटा प्रदान करेगा। चुनौतीपूर्ण कुछ भी नहीं पढ़ता है और कभी नहीं बसता है।
— अनुपम मौर्य
क्या मैं पूछ सकता हूं कि आप goफ़ंक्शन को प्लस साइन पास क्यों करते हैं history.go(+1):? history.go(1)पर्याप्त होगा।
— gion_13
10

यह ब्राउज़र और हैश इतिहास के साथ काम करता है।

this.props.history.goBack();
— user3322876
स्रोत
8

यह एक कार्यशील बैकबटन घटक है (प्रतिक्रिया 0.14):

var React = require('react');
var Router = require('react-router');

var History = Router.History;

var BackButton = React.createClass({
  mixins: [ History ],
  render: function() {
    return (
      <button className="back" onClick={this.history.goBack}>{this.props.children}</button>
    );
  }
});

module.exports = BackButton;

अगर कोई इतिहास नहीं है तो आप कुछ इस तरह से कर सकते हैं:

<button className="back" onClick={goBack}>{this.props.children}</button>

function goBack(e) {
  if (/* no history */) {
    e.preventDefault();
  } else {
    this.history.goBack();
  }
}
— ngstschr
स्रोत
7

प्रतिक्रिया-राउटर v2.x के लिए यह बदल गया है। यहाँ मैं ES6 के लिए क्या कर रहा हूँ:

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { Router, RouterContext, Link, browserHistory } from 'react-router';

export default class Header extends React.Component {

  render() {
    return (
      <div id="header">
        <div className="header-left">
          {
            this.props.hasBackButton &&
            <FontAwesome name="angle-left" className="back-button" onClick={this.context.router.goBack} />
          }
        </div>
        <div>{this.props.title}</div>
      </div>
    )
  }
}

Header.contextTypes = {
  router: React.PropTypes.object
};

Header.defaultProps = {
  hasBackButton: true
};

Header.propTypes = {
  title: React.PropTypes.string
};
— हुकुम का इक्का
स्रोत
5

प्रतिक्रिया-राउटर v4.x में आप उपयोग कर सकते हैं history.goBackजो इसके बराबर है history.go(-1)।

App.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />

        <Back />{/* <----- This is component that will render Back button */}
      </div>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

Back.js

import React from "react";
import { withRouter } from "react-router-dom";

const Back = ({ history }) => (
  <button onClick={history.goBack}>Back to previous page</button>
);

export default withRouter(Back);

डेमो: https://codesandbox.io/s/ywmvp95wpj

कृपया याद रखें कि historyअपने उपयोगकर्ताओं का उपयोग करके छोड़ सकते हैं क्योंकि history.goBack()आपके आवेदन को खोलने से पहले आगंतुक द्वारा देखे गए पृष्ठ को लोड किया जा सकता है।

ऊपर बताए अनुसार ऐसी स्थिति को रोकने के लिए, मैंने एक साधारण लाइब्रेरी रिएक्टर-राउटर-लास्ट-लोकेशन बनाया है जो आपके उपयोगकर्ताओं को अंतिम स्थान पर देखता है।

उपयोग बहुत सीधा है। सबसे पहले आप स्थापित करने की आवश्यकता react-router-domऔर react-router-last-locationसे npm।

npm install react-router-dom react-router-last-location --save

फिर LastLocationProviderनीचे के रूप में उपयोग करें:

App.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { LastLocationProvider } from "react-router-last-location";
//              ↑
//              |
//              |
//
//       Import provider
//
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <h5>Click on About to see your last location</h5>
    <Router>
      <LastLocationProvider>{/* <---- Put provider inside <Router> */}
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />

          <Back />
        </div>
      </LastLocationProvider>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

Back.js

import React from "react";
import { Link } from "react-router-dom";
import { withLastLocation } from "react-router-last-location";
//              ↑
//              |
//              |
//
//    `withLastLocation` higher order component
//    will pass `lastLocation` to your component               
//
//                   |
//                   |
//                   ↓
const Back = ({ lastLocation }) => (
  lastLocation && <Link to={lastLocation || '/'}>Back to previous page</Link>
);


//          Remember to wrap
//   your component before exporting
//
//                   |
//                   |
//                   ↓
export default withLastLocation(Back);

डेमो: https://codesandbox.io/s/727nqm99jj

— hinok
स्रोत
आप लास्टलोकेशन ऑब्जेक्ट को उस कंपोनेंट में कैसे खींचेंगे जो इसकी ज़रूरत है - यानी, मैं इसे अपने उदाहरणों की तरह कुछ प्रदर्शित आउटपुट के बजाय प्रोग्रामेटिक रूप से उपयोग करना चाहता हूँ: if (lastLocation == 'about')
— dmayo
यकीन नहीं होता अगर मैंने आपको सही तरीके से समझा, तो कृपया मुझे सही करें अगर मैं गलत हूं। क्या आप lastLocationप्रतिक्रिया से बाहर का उपयोग करना चाहेंगे या शायद कह कर I'd like to use it programmatically, क्या आप इसे आयात करने की क्षमता रखना चाहते हैं import { lastLocation } from '...'?
— हिनोक
5

मेरे लिए जो काम किया गया था वह मेरी फ़ाइल के शीर्ष पर withRouter आयात करना था;

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

फिर इसे मेरी फ़ाइल के नीचे निर्यातित फ़ंक्शन को लपेटने के लिए उपयोग करें;

export default withRouter(WebSitePageTitleComponent)

जिसके बाद मुझे राउटर के इतिहास प्रोप तक पहुंचने की अनुमति मिली। नीचे पूर्ण नमूना कोड!

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

import PropTypes from 'prop-types'

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

  handleClick() {
    event.preventDefault()
    this.props.history.goBack()
  }

  render() {
    return (
      <div className="page-title">
        <a className="container" href="/location" onClick={this.handleClick}>
          <h1 className="page-header">
            { this.props.title }
          </h1>
        </a>
      </div>
    )
  }
}

const { string, object } = PropTypes

TestComponent.propTypes = {
  title: string.isRequired,
  history: object
}

export default withRouter(TestComponent)
— Vancy-पैंट
स्रोत
5

विशिष्ट पृष्ठ पर वापस जाएं :

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

  const history = useHistory();
  
  const routeChange = () => {
    let path = '/login';
    history.push(path);
  };

पिछले पृष्ठ पर वापस जाएं :

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

  const history = useHistory();
  
  const routeChange = () => {
    history.goBack()
  };
— dhahn
स्रोत
2
धन्यवाद, यह एक महान 2020 उत्तर है! स्वीकृत उत्तर 2015 तक था
— बीटफोसिनो
3 
import { withRouter } from 'react-router-dom'

this.props.history.goBack();

मैं इन संस्करणों का उपयोग कर रहा हूं 

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
— dush88c
स्रोत
2

मेरे लिए काम करने वाला एकमात्र समाधान सबसे सरल था। कोई अतिरिक्त आयात की जरूरत है।

<a href="#" onClick={() => this.props.history.goBack()}>Back</a>

Tks, IamMHussain

— JBarros
स्रोत
बहुत अच्छा। सरल और विनम्र
— दिनेश कानिवु
1

निम्न घटक को कॉल करें जैसे:

<BackButton history={this.props.history} />

और यहाँ घटक है:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class BackButton extends Component {
  constructor() {
    super(...arguments)

    this.goBack = this.goBack.bind(this)
  }

  render() {
    return (
      <button
        onClick={this.goBack}>
          Back
      </button>
    )
  }

  goBack() {
    this.props.history.goBack()
  }
}

BackButton.propTypes = {
  history: PropTypes.object,
}

export default BackButton

मैं उपयोग कर रहा हूँ:

"react": "15.6.1"
"react-router": "4.2.0"
— गल ब्राच
स्रोत
1

REDUX

आप भी उपयोग कर सकते हैं react-router-reduxजो है goBack()और push()।

यहाँ उस के लिए एक नमूना पैक है:

आपके ऐप के एंट्री पॉइंट में, आपको ज़रूरत है ConnectedRouter, और हुक करने के लिए कभी-कभी मुश्किल कनेक्शन historyवस्तु है। Redux मिडलवेयर इतिहास के बदलावों को सुनता है:

import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import client from './components/apolloClient'
import store, { history } from './store'
import Routes from './Routes'
import './index.css'

render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  document.getElementById('root'),
)

मैं आपको हुक अप करने का एक तरीका दिखाऊंगा history। ध्यान दें कि कैसे इतिहास को स्टोर में आयात किया जाता है और एक सिंगलटन के रूप में भी निर्यात किया जाता है, इसलिए इसका उपयोग ऐप के प्रवेश बिंदु में किया जा सकता है:

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const { devToolsExtension } = window
  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)

export default store

उपरोक्त उदाहरण ब्लॉक दिखाता है कि react-router-reduxसेटअप प्रक्रिया को पूरा करने वाले मिडलवेयर हेल्पर्स को कैसे लोड किया जाए ।

मुझे लगता है कि यह अगला भाग पूरी तरह से अतिरिक्त है, लेकिन मैं इसे सिर्फ उस स्थिति में शामिल करूंगा जब भविष्य में किसी को लाभ मिले:

import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'

export default combineReducers({
  routing, form,
})

मैं routerReducerहर समय उपयोग करता हूं क्योंकि यह मुझे उन घटकों को पुनः लोड करने की अनुमति देता है जो सामान्य रूप से नहीं होते हैं shouldComponentUpdate। स्पष्ट उदाहरण तब होता है जब आपके पास एक एनएवी बार होता है जो उपयोगकर्ता द्वारा एक NavLinkबटन दबाने पर अद्यतन करने वाला होता है । यदि आप उस सड़क से नीचे जाते हैं, तो आप सीखेंगे कि Redux की कनेक्ट विधि उपयोग करती है shouldComponentUpdate। के साथ routerReducer, आप उपयोग कर सकते हैंmapStateToProps नव बार में रूटिंग परिवर्तन को मैप लिए , और जब इतिहास ऑब्जेक्ट बदलता है तो इसे अपडेट करने के लिए ट्रिगर करेगा।

ऐशे ही:

const mapStateToProps = ({ routing }) => ({ routing })

export default connect(mapStateToProps)(Nav)

लोगों के लिए कुछ अतिरिक्त कीवर्ड जोड़ने पर मुझे माफ़ करें: यदि आपका घटक ठीक से अपडेट नहीं हो रहा है, shouldComponentUpdateतो कनेक्ट फ़ंक्शन को हटाकर जांच करें और देखें कि क्या यह समस्या को ठीक करता है या नहीं। यदि ऐसा है, तो routerReducerURL में बदलाव होने पर घटक और पुल ठीक से अपडेट हो जाएगा।

समापन में, वह सब करने के बाद, आप कॉल कर सकते हैं goBack()या push()कभी भी चाहें!

इसे अभी कुछ यादृच्छिक घटक में आज़माएँ:

  1. में आयात करें connect()
  2. तुम भी जरूरत नहीं है mapStateToPropsयाmapDispatchToProps
  3. GoBack में आयात करें और इससे पुश करें react-router-redux
  4. कॉल this.props.dispatch(goBack())
  5. कॉल this.props.dispatch(push('/sandwich'))
  6. सकारात्मक भावना का अनुभव करें

यदि आपको अधिक नमूने की आवश्यकता है, तो देखें : https://www.npmjs.com/package/react-router-redux

— agm1984
स्रोत
1

बस इस तरह का उपयोग करें

<span onClick={() => this.props.history.goBack()}>Back</span>
— IamMHussain
स्रोत
0

कोड का यह टुकड़ा आपके लिए ट्रिक करेगा। 

this.context.router.history.goBack()
— prajeesh
स्रोत
0

प्रतिक्रिया राउटर v6

useNavigate हुक अब वापस जाने के लिए अनुशंसित तरीका है:

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

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}>go back</button>
      <button onClick={() => navigate(1)}>go forward</button>
    </>
  );
}

कोडैंडबॉक्स नमूना

कई इतिहास स्टैक प्रविष्टियों को वापस / अग्रेषित करें: 
<button onClick={() => navigate(-2)}>go two back</button>
<button onClick={() => navigate(2)}>go two forward</button>
विशिष्ट मार्ग पर जाएं: 
navigate("users") // go to users route, like history.push
navigate("users", { replace: true }) // go to users route, like history.replace
navigate("users", { state }) // go to users route, pass some state in

useNavigate आगामी रिएक्ट सस्पेंस / समवर्ती मोड का बेहतर समर्थनuseHistory करने के लिए जगह ।

— ford04
स्रोत
मैंने यह प्रयास करने की कोशिश की लेकिन मुझे त्रुटि मिली:Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
— गीक
1
@ गीक अच्छा कैच। के साथ v6.0.0-beta.0, देवों ने historyपैकेज को एक सहकर्मी निर्भरता बना दिया है । अपडेट किए गए कोडैंडबॉक्स पर एक नज़र डालें, जो अब फिर से काम करता है।
— ford04
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.