प्रतिक्रिया-राउटर (v4) वापस कैसे जाएं?

Question

यह पता लगाने की कोशिश की जा रही है कि मैं पिछले पृष्ठ पर वापस कैसे जा सकता हूं। मै इस्तेमाल कर रहा हूँ[react-router-v4][1]

यह वह कोड है जिसे मैंने अपने पहले लैंडिंग पृष्ठ में कॉन्फ़िगर किया है:

<Router>
  <div>
    <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
    <Route exact path="/" component={Page1}/>
    <Route path="/Page2" component={Page2}/>
    <Route path="/Page3" component={Page3}/>
  </div>
</Router>

बाद के पृष्ठों को अग्रेषित करने के लिए, मैं बस यह करता हूं:

this.props.history.push('/Page2');

हालांकि, मैं पिछले पृष्ठ पर वापस कैसे जा सकता हूं? नीचे बताई गई कुछ चीजों की कोशिश की लेकिन कोई किस्मत नहीं: १।this.props.history.goBack();

त्रुटि देता है:

TypeError: null कोई ऑब्जेक्ट नहीं है ('this.props' का मूल्यांकन)

2. this.context.router.goBack();

त्रुटि देता है:

TypeError: null कोई ऑब्जेक्ट नहीं है ('this.context' का मूल्यांकन)

3. this.props.history.push('/');

त्रुटि देता है:

TypeError: null कोई ऑब्जेक्ट नहीं है ('this.props' का मूल्यांकन)

Page1नीचे दिए गए कोड को यहाँ पोस्ट करना :

import React, {Component} from 'react';
import {Button} from 'react-bootstrap';

class Page1 extends Component {
  constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
  }


  handleNext() {
    this.props.history.push('/page2');
  }

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


  /*
   * Main render method of this class
   */
  render() {
    return (
      <div>
        {/* some component code */}


        <div className="navigationButtonsLeft">
          <Button onClick={this.handleBack} bsStyle="success">&lt; Back</Button>
        </div>
        <div className="navigationButtonsRight">
          <Button onClick={this.handleNext} bsStyle="success">Next &gt;</Button>
        </div>

      </div>
    );
  }


export default Page1;

Comments

क्या कुछ चीजें हैं, आपने कोशिश की है?

— विवेक दोषी

try this.props.history.goBack(); github.com/ReactTraining/react-router/blob/…

— baskax

@VivekDoshi: जो कुछ मैंने त्रुटियों के साथ करने की कोशिश की उसे जोड़ा

— अक्षय लोकुर

@ अक्षयलोक, क्या आप कृपया पूरा कोड पोस्ट करेंगे, जहाँ से आप इसे निष्पादित करने का प्रयास कर रहे हैं। props.history.goBack () ;?

— विवेक दोषी

@VivekDoshi: हो गया, कृपया एक नज़र डालें, धन्यवाद

— अक्षय लोकुर

Answer 1

मुझे लगता है कि मुद्दा बाध्यकारी है:

constructor(props){
   super(props);
   this.goBack = this.goBack.bind(this); // i think you are missing this
}

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

.....

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

जैसा कि मैंने आपके द्वारा कोड पोस्ट करने से पहले मान लिया है:

constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
    this.handleBack = this.handleBack.bind(this); // you are missing this line
}

Comments

जब ब्राउज़र वापस बटन दबाया और में कार्य नहीं करता है componentDidUpdateऔर window.onpopstate?

— जमुनाश

Answer 2

this.props.history.goBack();

यह प्रतिक्रिया-राउटर v4 के लिए सही समाधान है

लेकिन एक बात जो आपको ध्यान में रखनी चाहिए वह यह है कि आपको यह सुनिश्चित करने की आवश्यकता है।

इसका मतलब है कि आपको इस फ़ंक्शन this.props.history.goBack();को उस घटक के अंदर कॉल करने की आवश्यकता है जिसे <मार्ग /> द्वारा लपेटा गया है

यदि आप इस फ़ंक्शन को उस घटक में कहते हैं जो घटक ट्री में गहरा है, तो यह काम नहीं करेगा।

संपादित करें:

यदि आप उस घटक में इतिहास ऑब्जेक्ट रखना चाहते हैं जो घटक ट्री में गहरा है (जो कि <मार्ग> द्वारा लपेटा नहीं गया है), तो आप इस तरह से कुछ कर सकते हैं:

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

class Demo extends Component {
    ...
    // Inside this you can use this.props.history.goBack();
}

export default withRouter(Demo);

Comments

तो यह कैसे काम कर सकता है? आप इतिहास में कहीं से भी वापस कैसे जा सकते हैं?

— फेलिप

@ फेलिप आप कहीं से भी वापस जा सकते हैं। मेरा तात्पर्य यह है कि आपको "इतिहास" ऑब्जेक्ट प्राप्त करने के लिए कंटेनर घटकों में कोड की इस लाइन को जोड़ने की आवश्यकता है, प्रेजेंटेशनल घटकों से कोड की इस लाइन का उपयोग न करें जो रूट द्वारा लपेटी नहीं गई हैं ( medium.com/@dan_abramov) / स्मार्ट-एंड-डंब-कंपोनेंट्स -7 k2f9a7c7d0 )

— Hoang Trinh

@ फेलिप: हाय, कृपया मेरे संपादित उत्तर की जाँच करें। मुझे लगता है कि यह आपके सवाल का जवाब देता है।

— होआंग त्रिनिह

WithRouter एडिट के लिए धन्यवाद, इसने मेरे लिए इसे ठीक कर दिया।

— मैथ्यू राइडआउट

Answer 3

रिएक्ट राउटर v4 और डोम-ट्री में कहीं भी एक कार्यात्मक घटक के साथ उपयोग के लिए।

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

const GoBack = ({ history }) => <img src="./images/back.png" onClick={() => history.goBack()} alt="Go back" />;

export default withRouter(GoBack);

Comments

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

— एसी पेट्रीस

वसा तीर संस्करण हमेशा मुझे बहुत साफ दिखता है, इसके लिए धन्यवाद।

— egdavid

Answer 4

यहां प्रत्येक उत्तर में कुल समाधान के कुछ भाग हैं। यहाँ पूरा समाधान है कि मैं इसे पाने के लिए घटकों के अंदर काम करने के लिए इस्तेमाल किया, जहां रूट का इस्तेमाल किया गया था:

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

^ आपको फ़ंक्शन आयात करने और पृष्ठ के निचले भाग पर घटक निर्यात करने के लिए उस दूसरी पंक्ति की आवश्यकता है।

render() {
  return (
  ...
    <div onClick={() => this.props.history.goBack()}>GO BACK</div>
  )
}

^ एरो फंक्शन की आवश्यकता है, बस पर क्लिक करें = {this.props.history.goBack ()}

export default withRouter(MyPage)

^ अपने घटक का नाम 'withRouter ()' के साथ लपेटें

Answer 5

क्या आप वह कोड प्रदान कर सकते हैं जहाँ आप उपयोग करते हैं this.props.history.push('/Page2');?

क्या आपने गो बैक () विधि आज़माई है?

this.props.history.goBack();

इसे यहाँ सूचीबद्ध किया गया है https://reacttraining.com/react-router/web/api/history

यहां एक जीवंत उदाहरण के साथ https://reacttraining.com/react-router/web/example/modal-gallery

Comments

यह मुझे त्रुटि देता है, कृपया ऊपर अद्यतन प्रश्न देखें

— अक्षय लोकुर

क्या आप भी कोड जोड़ सकते हैं this.props.history.push('/Page2');? अगर this.propsवहाँ अशक्त नहीं है, यह काम करना चाहिए।

— अल्फ्रेडो री

वास्तव में कुछ भी नहीं है, मैं सिर्फ अपने कंपोनेंट

— अक्षय लोकुर

Answer 6

यहाँ सबसे साफ और सरल तरीका है जिससे आप इस समस्या को संभाल सकते हैं, जो कि संभावित नुकसान को भी कम कर देता है this keyword। कार्यात्मक घटकों का उपयोग करें:

import { withRouter } from "react-router-dom";इस के साथ अपने componentया बेहतर लपेटो "एप्लिकेशन चौड़ा" उपलब्ध होने के लिए बनाता है। अपने घटक को लपेटने से केवल घटक `` आपकी पसंद बन जाता है।App.jswithRouter() HOChistoryhistory available for that specific

मतलब आपके पास है:

1. export default withRouter(App);

2. Redux वातावरण में export default withRouter( connect(mapStateToProps, { <!-- your action creators -->})(App), );आप historyअपने एक्शन क्रिएटर्स से इस तरह से भी सक्षम हो सकते हैं ।

अपने componentनिम्नलिखित में करें:

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

const history = useHistory(); // do this inside the component

goBack = () => history.goBack();

<btn btn-sm btn-primary onclick={goBack}>Go Back</btn>

export default DemoComponent;

गोत्चा useHistoryकेवल नवीनतम v5.1 से निर्यात किया जाता है react-router-domइसलिए पैकेज को अपडेट करना सुनिश्चित करें। हालाँकि, आपको चिंता करने की ज़रूरत नहीं है। के कई snags के बारे में this keyword।

आप अपने ऐप पर उपयोग करने के लिए इसे पुन: उपयोग करने योग्य घटक भी बना सकते हैं।

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

Comments

धन्यवाद। लेकिन, जब मैं एक ब्राउज़र वापस करता हूं तो मेरे घटक को फिर से क्यों नहीं पेश किया जाता है?

— स्टीफन

Answer 7

प्रयत्न:

this.props.router.goBack()

Comments

यह मुझे त्रुटि देता है, कृपया ऊपर अद्यतन प्रश्न देखें

— अक्षय लोकुर

आप अपना राउटर या इतिहास कहां से प्राप्त कर रहे हैं? सुनिश्चित करें कि आप इसे अपने मूल घटक या पृष्ठ (यानी कंसोल.लॉग (this.props) से रेंडर फ़ंक्शन पर प्राप्त कर रहे हैं और जांचें कि आप इसे उपयोग करने में सक्षम होने के लिए राउटर प्रोप को प्रिंट कर रहे हैं। मुझे लगता है। आपके कंपोनेंट में राउटर नहीं है।

— Rodius

Answer 8

बस उपयोग करें

<span onClick={() => this.props.history.goBack()}>Back</span>

Answer 9

आशा है कि यह किसी की मदद करेगा:

import React from 'react';
import * as History from 'history';
import { withRouter } from 'react-router-dom';

interface Props {
  history: History;
}

@withRouter
export default class YourComponent extends React.PureComponent<Props> {

  private onBackClick = (event: React.MouseEvent): void => {
    const { history } = this.props;
    history.goBack();
  };

...

Answer 10

शायद यह किसी की मदद कर सकता है।

मैं history.replace()रीडायरेक्ट करने के लिए उपयोग कर रहा था , इसलिए जब मैंने उपयोग करने की कोशिश की, तो history.goBack()मैं उस पृष्ठ से पहले वाले पृष्ठ पर भेज रहा था जिसके साथ मैं काम कर रहा था। इसलिए मैंने इस पद्धति history.replace()को बदल दिया history.push()ताकि इतिहास को बचाया जा सके और मैं वापस जा सकूंगा।

Answer 11

मुझे यकीन नहीं है कि कोई और इस समस्या में भाग गया या इसे देखने की आवश्यकता हो सकती है। लेकिन मैंने इस मुद्दे को हल करने के लिए लगभग 3 घंटे बिताए:

मैं एक बटन के क्लिक पर एक सरल goBack () को लागू करना चाहता था। मुझे लगा कि मैं एक अच्छी शुरुआत के लिए तैयार हूं क्योंकि मेरा App.js पहले से ही राउटर में लिपटा हुआ था और मैं 'रिएक्टर-राउटर-डोम' से {BrowserRouter को Router} आयात कर रहा था; ... चूंकि राउटर तत्व मुझे इतिहास वस्तु का आकलन करने की अनुमति देता है।

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

import React from 'react';
import './App.css';
import Splash from './components/Splash';
import Header from './components/Header.js';
import Footer from './components/Footer';
import Info from './components/Info';
import Timer from './components/Timer';
import Options from './components/Options';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Header />
      <Route path='/' component={Splash} exact />
      <Route path='/home' component={Info} exact />
      <Route path='/timer' component={Timer} exact />
      <Route path='/options' component={Options} exact />
      <Footer />
    </Router>
  );
}
export default App;

लेकिन मुसीबत मेरे नव (एक बच्चे के घटक) मॉड्यूल पर थी, मुझे 'प्रतिक्रिया-राउटर-डोम' से {withRouter} आयात करना पड़ा; ' और फिर इसके साथ निर्यात को बाध्य करें:

export default withRouter(Nav);

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

import React from 'react';
import { withRouter } from 'react-router-dom';
class Nav extends React.Component {
    render() {
        return (
            <div>
                <label htmlFor='back'></label>
                <button id='back' onClick={ () => this.props.history.goBack() }>Back</button>
                <label htmlFor='logOut'></label>
                <button id='logOut' ><a href='./'>Log-Out</a>            
</button>
            </div>
        );
    }
}
export default withRouter(Nav);

संक्षेप में, प्रतिक्रिया में एक ज्ञात समस्या के कारण withRouter बनाया गया था, जहां कुछ परिदृश्यों में जब राउटर से विरासत को अस्वीकार कर दिया जाता है, तो एक मजबूर निर्यात आवश्यक है।

Answer 12

आप history.goBack()कार्यात्मक घटक में उपयोग कर सकते हैं । सिर्फ इस तरह।

import { useHistory } from 'react-router';
const component = () => { 
  const history = useHistory();

  return (
   <button onClick={() => history.goBack()}>Previous</button>
  )
}