প্রতিক্রিয়া-রাউটার (v4) কিভাবে ফিরে যেতে?

Question 1

আমি কীভাবে আগের পৃষ্ঠায় ফিরে যেতে পারি তা জানার চেষ্টা করছি। আমি ব্যাবহার করছি[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');

তবে, আমি কীভাবে আগের পৃষ্ঠায় ফিরে যেতে পারি? নীচে উল্লিখিত কিছু জিনিস চেষ্টা করেছি তবে ভাগ্য নেই: 1।this.props.history.goBack();

ত্রুটি দেয়:

প্রকারের ত্রুটি: নাল কোনও বস্তু নয় ('এই.পড়গুলি' মূল্যায়ন করে)

this.context.router.goBack();

ত্রুটি দেয়:

TypeError: নাল কোনও অবজেক্ট নয় ('this.context' এর মূল্যায়ন করছে)

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

ত্রুটি দেয়:

প্রকারের ত্রুটি: নাল কোনও বস্তু নয় ('এই.পড়গুলি' মূল্যায়ন করে)

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;

Question 2

আমি মনে করি সমস্যাটি বাধ্যবাধকতার সাথে রয়েছে:

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
}

Question 3

this.props.history.goBack();

এটি প্রতিক্রিয়া-রাউটার ভি 4 এর সঠিক সমাধান

তবে একটি বিষয় আপনার মনে রাখা উচিত তা হ'ল এটি নিশ্চিত করা দরকার this

এর অর্থ হল this.props.history.goBack();<রাস্তা /> দ্বারা মোড়ানো উপাদানটির ভিতরে আপনাকে এই ফাংশনটি কল করতে হবে

আপনি যদি এই ফাংশনটিকে উপাদান উপাদানটির গভীরতর অংশে কল করেন তবে এটি কার্যকর হবে না।

সম্পাদনা:

আপনি যদি উপাদান উপাদানটির গা deep় (যেটি <রুট> দ্বারা আবৃত নয়) এর গভীরে থাকা উপাদানটিতে ইতিহাসের অবজেক্ট থাকতে চান, আপনি এই জাতীয় কিছু করতে পারেন:

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

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

export default withRouter(Demo);

Question 4

প্রতিক্রিয়া রাউটার ভি 4 এবং ডোম-ট্রিের যে কোনও জায়গায় কার্যকরী উপাদান ব্যবহারের জন্য।

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);

Question 5

এখানে প্রতিটি উত্তরের মোট সমাধানের অংশ রয়েছে। এই সম্পূর্ণ সমাধানটি যা আমি এটির জন্য এই রুটটি ব্যবহৃত হয়েছিল তার চেয়ে গভীরতর উপাদানগুলির অভ্যন্তরে কাজ করতে পেতাম:

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

Function ফাংশন আমদানি করতে এবং পৃষ্ঠার নীচে উপাদান রপ্তানি করতে আপনার সেই দ্বিতীয় লাইনটি প্রয়োজন।

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

Simply কেবল অনক্লিক বনাম তীরের ফাংশনটির প্রয়োজন = {this.props.history.goBack ()}

export default withRouter(MyPage)

with আপনার উইন্ডোটির নাম 'উইথ রউটার ()' দিয়ে মুড়ে দিন

Question 6

আপনি যে কোডটি ব্যবহার করেন সেখানে কি আপনি তা সরবরাহ করতে পারেন 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

Question 7

আপনি এই সমস্যাটি পরিচালনা করতে পারেন এখানে সবচেয়ে সহজ এবং সহজ উপায়, যা এর সম্ভাব্য সমস্যাগুলিও বাতিল করে দেয় this keyword। কার্যকরী উপাদান ব্যবহার করুন:

import { withRouter } from "react-router-dom"; আপনার এটিকে componentআরও ভালভাবে মোড়ানো করুন App.jsএটি "অ্যাপ-ওয়াইড" উপলভ্য করে withRouter() HOCতোলে history। আপনার উপাদান মোড়ানো কেবল উপাদান তৈরি করে ``` আপনার history available for that specific পছন্দ।

সুতরাং তোমার আছে:

export default withRouter(App);
একটি রেডাক্স পরিবেশে আপনার ক্রিয়াকলাপকারীদের কাছ থেকেও এভাবে export default withRouter( connect(mapStateToProps, { })(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তাই প্যাকেজটি আপডেট করার বিষয়ে নিশ্চিত হন। তবে আপনার চিন্তা করার দরকার নেই। এর অনেক ছিনতাই সম্পর্কে this keyword।

আপনি আপনার অ্যাপ্লিকেশন জুড়ে এটি পুনরায় ব্যবহারযোগ্য উপাদান করতে পারেন।


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

Question 8

চেষ্টা করুন:

this.props.router.goBack()

Question 9

সহজভাবে ব্যবহার করুন

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

Question 10

আশা করি এটি কাউকে সহায়তা করবে:

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();
  };

...

Question 11

হতে পারে এটি কাউকে সাহায্য করতে পারে।

আমি history.replace()পুনঃনির্দেশের জন্য ব্যবহার করছিলাম , সুতরাং যখন আমি ব্যবহার করার চেষ্টা করছিলাম history.goBack(), আমি যে পৃষ্ঠায় কাজ করছি তার আগে আমাকে পূর্ববর্তী পৃষ্ঠায় প্রেরণ করা হয়েছিল। তাই আমি পদ্ধতি পরিবর্তন history.replace()করার জন্য history.push(), যাতে ইতিহাস সংরক্ষিত হতে পারে এবং আমি ফিরে যেতে সক্ষম হবে।

Question 12

আমি নিশ্চিত নই যে অন্য কেউ এই সমস্যায় পড়েছে বা এটি দেখার প্রয়োজন হতে পারে। তবে আমি এই সমস্যাটি সমাধান করার চেষ্টা করে প্রায় 3 ঘন্টা ব্যয় করেছি:

আমি একটি বোতামের ক্লিকে একটি সহজ গব্যাক () প্রয়োগ করতে চেয়েছিলাম। আমি ভেবেছিলাম আমি একটি ভাল সূচনায় এসেছি কারণ আমার অ্যাপ.জেএস ইতিমধ্যে রাউটারটিতে আবৃত ছিল এবং আমি 'রিয়েট-রাউটার-ডোম' থেকে রাউটার হিসাবে ব্রাউজাররউটারটি আমদানি করছি; ... যেহেতু রাউটার উপাদান আমাকে ইতিহাসের বিষয়টিকে মূল্যায়ন করতে দেয়।

প্রাক্তন:

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;

তবে সমস্যাটি আমার নাভ (একটি শিশু উপাদান) মডিউলে ছিল, আমাকে 'রিয়েট-রাউটার-ডোম' থেকে 'রউটার সহ' আমদানি করতে হয়েছিল; ' এবং তারপরে একটি রফতানিটিকে বাধ্য করুন:

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);

সংক্ষেপে, সাথে রাউটারটি এমন একটি পরিচিত সমস্যার কারণ হিসাবে তৈরি হয়েছিল যেখানে প্রতিক্রিয়া ঘটে যখন নির্দিষ্ট পরিস্থিতিতে যখন কোনও রাউটারের উত্তরাধিকার প্রত্যাখ্যান করা হয়, তখন জোরপূর্বক রফতানি জরুরি।

Question 13

আপনি history.goBack()কার্যকরী উপাদান ব্যবহার করতে পারেন । ঠিক এই রকম.

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

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