প্রতিক্রিয়া-রাউটার একটি পৃষ্ঠা ফিরে যান আপনি কীভাবে ইতিহাস কনফিগার করবেন?

Question

কেউ কি দয়া করে আমাকে বলতে পারেন যে আমি কোনও নির্দিষ্ট রুটের পরিবর্তে কীভাবে আগের পৃষ্ঠায় ফিরে যেতে পারি?

এই কোডটি ব্যবহার করার সময়:

var BackButton = React.createClass({

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

  navigateBack: function(){
    this.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);
 });

Comments

যদি আপনি কোনও সমাধান খুঁজে পেয়ে থাকেন তবে আপনি দয়া করে এটি এখানে ভাগ করে নিতে পারেন। ধন্যবাদ।

— ব্যবহারকারী261002

Answer 1

আমার মনে হয় আপনি ঠিক এটি intializing করে আপনার রাউটারে 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);

Comments

হাই, আমরাও একই সমস্যার মুখোমুখি হই। আপনি দয়া করে বিস্তারিত আরও ব্যাখ্যা করতে পারেন ধন্যবাদ

— user261002

এটি কিভাবে সঠিক উত্তর? এটি এমনকি প্রশ্নের উত্তর দেয় না। @ বোমার

— জিএন

যে কারও জন্য এটি পড়া। আপনি যদি কোনও শিশু উপাদান থেকে এটি করতে চান তবে। আপনি ইতিহাসের বিষয়টি খুঁজে পেতে পারেন this.props.history। সুতরাং, কোডটি হয়ে যায়this.props.history.goBack

— সিসির

কীভাবে প্রতিক্রিয়া-রাউটার 4? আমি মনে করি না এটি আর ব্রাউজারহিসটরি সমর্থন করে।

— অক্ষয় লোকুর

রিঅ্যাক্ট-রাউটার-ডোম সংস্করণ 5 হিসাবে, ইতিহাস ব্রাউজাররউটার দ্বারা স্পষ্টভাবে তৈরি করা হয় এবং প্রপসের মাধ্যমে পাওয়া যায়, আপনি প্রপস হিস্টোরির মাধ্যমে এটি অ্যাক্সেস করতে পারতেন।

— শ্রীকান্ত কিথাম

Answer 2

রিএ্যাক্ট ভি 16 এবং রিঅ্যাক্টরউটার ভি 4.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>
    )
  }
}

প্রতিক্রিয়া v15 এবং রিঅ্যাক্টরউটার 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>
    );
  }
});

এম্বেড থাকা আইফ্রেমে আরও কিছুটা জটিল উদাহরণ দিয়ে একটি ফিডল তৈরি করেছে: https://jsfiddle.net/kwg1da3a/

ভি 14 এবং রিএ্যাকরউটার ভি 1.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);
    }
  },
  ...

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

এই সমাধানটি উভয় দৃশ্যের যত্ন নেবে। এটি অবশ্য কোনও আইফ্রেমে হ্যান্ডেল করবে না যা পৃষ্ঠার মধ্যে নেভিগেট করতে পারে (এবং ব্রাউজারের ইতিহাসে যুক্ত করতে), পিছনের বোতামটি দিয়ে। সত্যি বলতে গেলে, আমি মনে করি এটি প্রতিক্রিয়া-রাউটারের একটি বাগ। এখানে সমস্যা তৈরি হয়েছে: https://github.com/rackt/react-router/issues/1874 18

Comments

প্রসঙ্গটি ব্যবহার না করে এটি করার কোনও উপায় থাকলে ভাল হবে?

— আদম ডি

এছাড়াও, সেটআপের উপর নির্ভর করে, এই.প্রেসস হিস্টরি.গোব্যাকটি ব্যবহার করতে পারেন এই কন্টেক্সট.রোটার হিস্টরি.গোব্যাকের পরিবর্তে

— ফিনিক্সবি

Answer 3

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

Comments

বিটিডব্লিউ এটি আমদানি বা ব্যবহার না করেও আমার পক্ষে কাজ করে withRouter। হতে পারে আমরা কেবল ব্রাউজারের ইতিহাস নেটিভ ব্যবহার করছি using তবে কি ঠিক আছে ??

— জিয়ানফ্র্যাঙ্কো পি

এটি দুর্দান্ত সমাধান। ব্যবহারকারী যখন সরাসরি ইউআরএল -> ব্যবহার করে পৃষ্ঠায় অবতরণ করেন কেবল তখনই সমস্যা এটি অ্যাপ্লিকেশনটিকে ভেঙে দেবে কারণ এর ইতিহাস নেই।

— 3:38

এখানে সেরা ব্যাখ্যা

— Z_z_Z

— @ মিশেলফ্রিজেম

Answer 4

this.context.router.goBack()

কোনও নেভিগেশন মেশিনের প্রয়োজন নেই!

Comments

এটি এখনও প্রতিক্রিয়া রাউটার ভি 4 এ কাজ করে, তবে এটি this.context.router.history.goBack। (+ ইতিহাস)

— বেন গোটো

import { withRouter } from 'react-router-dom';this.props.history.goBack();

— বিক্রিয়া

@ felansu এর আপনার কাছে যেমন উত্তর ব্যাখ্যা প্রয়োজন আপনার উপাদান withRouter রপ্তানি করতে মন্তব্যের ছাড়াও stackoverflow.com/a/49130220/3123338

— মশাই প্রশ্ন

Answer 5

রিঅ্যাক্ট-রাউটার, স্টেটলেস ফাংশন ব্যবহার করে মিক্সিন ছাড়াই ES6 পদ্ধতি।

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

export const Test = () => (
  <div className="">
    <button onClick={browserHistory.goBack}>Back</button>
  </div>
)

Comments

আপনার সমাধানটি চেষ্টা করার সময় আমি একটি ব্রাউজারের সতর্কতা পাই:export 'browserHistory' was not found in 'react-router'

— রাল্ফ ডেভিড অ্যাবারনাথি

ব্রাউজারের ইতিহাস কেবলমাত্র v2 এবং v3 এ বিদ্যমান। আপনি যদি ভি 4 ব্যবহার করেন তবে মাইগ্রেশন গাইডটি পড়তে হবে: github.com/ReactTraining/react-router/blob/…

— ptorsson

: @Ralp, যদি আপনি এই ত্রুটি বার্তা পেতে, এই চেক আউট stackoverflow.com/questions/49787659/...

— মাইলস এম

Answer 6

প্রতিক্রিয়া হুক ব্যবহার করে

আমদানি:

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

রাজ্যহীন উপাদান:

  let history = useHistory();

ইভেন্টে

history.goBack()

Comments

<বাটনে ক্লিক করুন = {() => ইতিহাস.goBack () Back> ফিরে </ বাটন>

— হান্টার

এটি উল্লেখ করার জন্য ধন্যবাদ কারণ আমি হুক পছন্দ করি। আমি এখনও পর্যন্ত রাউটারের সাথে ব্যবহার করছি।

— নতুন

Answer 7

প্রতিক্রিয়া-রাউটার ভি 4 লাইভ উদাহরণ সহ 16.0 প্রতিক্রিয়া ব্যবহার করে আমার কাজের উদাহরণটি দেখুন । কোড গিথুব দেখুন

ব্যবহার করুন 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

PS দুঃখিত কোডটি এখানে সব পোস্ট করা বড় to

Comments

এটি 19-এর হিসাবে গ্রহণযোগ্য উত্তর হওয়া উচিত। প্রতিক্রিয়া রাউটারটি "উইথ রউটার" নামে একটি উচ্চতর অর্ডার উপাদান (HOC) সরবরাহ করে যাতে আপনি ইতিহাস এবং অবস্থানের মতো প্রপসগুলিতে অ্যাক্সেস পেতে আপনার উপাদানটি মোড়ানো করতে পারেন।

হ্যাঁ এইচওসি রউটারের সাথে আপনার উপাদানগুলির অংশ মোড়ানো আপনার ইতিহাস এবং অবস্থানের ডেটা সরবরাহ করবে। কিছু চ্যালেঞ্জিং পড়া এবং কখনও স্থির হয় না।

— অনুপম

আমি জিজ্ঞেস করতে পারি কেন আপনাকে যোগ চিহ্ন পাস goফাংশন: history.go(+1)? history.go(1)যথেষ্ট হতে হবে।

— gion_13

Answer 8

এটি ব্রাউজার এবং হ্যাশ ইতিহাসের সাথে কাজ করে।

this.props.history.goBack();

Answer 9

এটি একটি কর্মক্ষম ব্যাকবটন উপাদান (প্রতিক্রিয়া 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();
  }
}

Answer 10

প্রতিক্রিয়া-রাউটার ভি 2.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
};

Answer 11

রিঅ্যাক্ট-রাউটার 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

Comments

আপনি কীভাবে লাস্টলোকেশন অবজেক্টটিকে প্রয়োজনীয় উপাদানটির মধ্যে টানবেন - এটি হ'ল আমি আপনার উদাহরণগুলির মতো কিছু প্রদর্শিত আউটপুট না করে প্রোগ্রামাগুলিভাবে এটি ব্যবহার করতে চাই: যদি (সর্বশেষ অবস্থান == 'সম্পর্কে')

— ডমায়ো

আমি আপনাকে সঠিকভাবে বুঝতে পেরেছি কিনা তা নিশ্চিত নই, তাই দয়া করে আমি ভুল হলে আমাকে সংশোধন করুন। আপনি কি lastLocationপ্রতিক্রিয়াটির বাইরে বা সম্ভবত এটি ব্যবহার করে ব্যবহার I'd like to use it programmaticallyকরতে চান, আপনি কি কেবল এটির মতো আমদানি করার ক্ষমতা রাখতে চান import { lastLocation } from '...'?

— হিনোক

Answer 12

আমার জন্য যা কাজ করেছিল তা ছিল আমার ফাইলের শীর্ষে রউটারের সাথে আমদানি করা;

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)

Answer 13

নির্দিষ্ট পৃষ্ঠায় ফিরে যান :

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

Comments

ধন্যবাদ, এটি একটি দুর্দান্ত 2020 উত্তর! গৃহীত উত্তরটি তাই 2015 ছিল

— বীফ্টোসিনো

Answer 14

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",

Answer 15

আমার পক্ষে কাজ করা একমাত্র সমাধানটি ছিল সবচেয়ে সহজ। কোনও অতিরিক্ত আমদানির প্রয়োজন নেই।

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

Tks, IamMHussain

Comments

খুব সুন্দর. সাধারণ এবং নম্র

— দিনেশ কণিভু

Answer 16

নিম্নলিখিত উপাদানটিকে কল করুন:

<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"

Answer 17

REDUX

এছাড়াও আপনি ব্যবহার করতে পারেন react-router-reduxযা হয়েছে goBack()এবং push()।

এটির জন্য এখানে একটি নমুনা প্যাকটি রয়েছে:

আপনার অ্যাপ্লিকেশনটির প্রবেশের বিন্দুতে আপনার প্রয়োজন হবে ConnectedRouterএবং হুক আপ করার জন্য কখনও কখনও জটিল সংযোগটি হ'ল historyঅবজেক্ট। রেডাক্স মিডলওয়্যার ইতিহাসের পরিবর্তনগুলি শোনে:

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হয় তবে সংযোগ ফাংশনটি সরিয়ে তদন্ত করুন এবং দেখুন এটি সমস্যার সমাধান করে কিনা। যদি তা হয় তবে টানুন এবং routerReducerইউআরএল পরিবর্তন হলে উপাদানটি সঠিকভাবে আপডেট হবে।

সমাপ্তিতে, সমস্ত কিছু করার পরে, আপনি কল করতে পারেন 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

Answer 18

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

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

Answer 19

কোডটির এই অংশটি আপনার জন্য কৌশলটি করবে।

this.context.router.history.goBack()

Answer 20

প্রতিক্রিয়া রাউটার 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 করার জন্য প্রতিস্থাপন করে ।

Comments

আমি এটি চেষ্টা করার চেষ্টা করেছি কিন্তু ত্রুটিটি পেয়েছিলাম:Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.

— গীক

@ ভাল ধরা এর সাথে v6.0.0-beta.0, ডেভস historyপ্যাকেজটিকে পিয়ার নির্ভরতা করে তুলেছে । আপডেট করা কোডস্যান্ডবক্সে একবার দেখুন, যা এখন আবার কাজ করে।

— ford04

Answer 21

Https://reacttraining.com/react-router/web/api/history অনুসারে

জন্য "react-router-dom": "^5.1.2",,

const { history } = this.props;
<Button onClick={history.goBack}>
  Back
</Button>

YourComponent.propTypes = {
  history: PropTypes.shape({
    goBack: PropTypes.func.isRequired,
  }).isRequired,
};