react-router ga een pagina terug hoe configureer je de geschiedenis?

Kan iemand me vertellen hoe ik terug kan gaan naar de vorige pagina in plaats van naar een specifieke route?

Bij gebruik van deze code:

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

Krijg deze fout, goBack() is genegeerd omdat er geen routergeschiedenis is

Dit zijn mijn routes:

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

Antwoord 1, autoriteit 100%

Update met React v16 en ReactRouter v4.2.0 (oktober 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>
    )
  }
}

Update met React v15 en ReactRouter v3.0.0 (augustus 2016):

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

Een viool gemaakt met een iets complexer voorbeeld met een ingesloten iframe: https://jsfiddle.net/kwg1da3a/

React v14 en ReacRouter v1.0.0 (10 sep. 2015)

U kunt dit doen:

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);
    }
  },
  ...

Je moet oppassen dat je de nodige geschiedenis hebt om terug te gaan. Als u rechtstreeks op de pagina klikt en vervolgens teruggaat, gaat u terug naar de browsergeschiedenis vóór uw app.

Deze oplossing zorgt voor beide scenario’s. Het zal echter geen iframe aankunnen dat binnen de pagina kan navigeren (en kan toevoegen aan de browsergeschiedenis), met de terug-knop. Eerlijk gezegd denk ik dat dat een bug is in de react-router. Probleem gemaakt hier: https://github.com/rackt/react-router/issues/1874

Antwoord 2, autoriteit 83%

React Hooks gebruiken

Importeren:

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

In staatloze component:

let history = useHistory();

Bel het evenement:

history.goBack()

Voorbeelden die wel worden gebruikt in gebeurtenisknop:

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

of

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

Antwoord 3, autoriteit 52%

Ik denk dat je BrowserHistory op je router moet inschakelen door het als volgt te initialiseren: <Router history={new BrowserHistory}>.

Daarvoor moet u BrowserHistorynodig hebben van 'react-router/lib/BrowserHistory'

Ik hoop dat dat helpt!

UPDATE: voorbeeld in 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);

Antwoord 4, autoriteit 51%

1. importeer withRouter

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

2. Exporteer uw component als:

   export withRouter(nameofcomponent) 
   

3. Voorbeeld, op de knop klikt, bel goBack:

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

Getest op react-router-domv4.3

Antwoord 5, autoriteit 38%

this.context.router.goBack()

Geen navigatiemix vereist!

Antwoord 6, autoriteit 29%

ES6-methode zonder mixins met behulp van react-router, stateless-functie.

import React from 'react'
import { browserHistory } from 'react-router'
export const Test = () => (
  <div className="">
    <button onClick={browserHistory.goBack}>Back</button>
  </div>
)

Antwoord 7, autoriteit 21%

Ga terug naar specifieke pagina:

 import { useHistory } from "react-router-dom";
  const history = useHistory();
  const routeChange = () => {
    let path = '/login';
    history.push(path);
  };

Ga terug naar vorigepagina:

 import { useHistory } from "react-router-dom";
  const history = useHistory();
  const routeChange = () => {
    history.goBack()
  };

Antwoord 8, autoriteit 14%

React Router v6

useNavigateHook is de aanbevolen manier om nu terug te gaan:

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

Codesandbox-voorbeeld

Ga terug/vooruit in meerdere geschiedenisstack-items:

<button onClick={() => navigate(-2)}>go two back</button>
<button onClick={() => navigate(2)}>go two forward</button>

Ga naar specifieke route:

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

useNavigatevervangtuseHistorydoor ondersteuningaanstaande React Suspense/Concurrent-modus beter.

Antwoord 9, autoriteit 11%

Dit werkt met browser- en hashgeschiedenis.

this.props.history.goBack();

Antwoord 10, autoriteit 11%

Bekijk mijn werkvoorbeeld met React 16.0 met React-router v4. bekijk de code Github

Gebruik withRouteren history.goBack()

Dit is het idee dat ik implementeer…

Geschiedenis.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. sorry de code is te groot om het hier allemaal te posten

Antwoord 11, autoriteit 8%

Dit is een werkende BackButton-component (React 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;

Je kunt natuurlijk zoiets doen als er geen geschiedenis is:

<button className="back" onClick={goBack}>{this.props.children}</button>
function goBack(e) {
  if (/* no history */) {
    e.preventDefault();
  } else {
    this.history.goBack();
  }
}

Antwoord 12, autoriteit 7%

Voor react-router v2.x is dit veranderd. Dit is wat ik doe voor 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
};

Antwoord 13, autoriteit 7%

In react-router v4.x kun je history.goBackgebruiken, wat gelijk is aan 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);

Demo:
https://codesandbox.io/s/ywmvp95wpj

Houd er rekening mee dat door gebruik te maken van historyuw gebruikers kunnen vertrekken omdat history.goBack()een pagina kan laden die een bezoeker heeft bezocht voordat ze uw applicatie openen.

Om een ​​dergelijke situatie zoals hierboven beschreven te voorkomen, heb ik een eenvoudige bibliotheek gemaakt react-router -last-locationdie de laatste locatie van uw gebruikers bekijken.

Het gebruik is heel eenvoudig.
Eerst moet je react-router-domen react-router-last-locationinstalleren vanaf npm.

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

Gebruik vervolgens LastLocationProviderzoals hieronder:

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

Demo:https://codesandbox.io/s/727nqm99jj

Antwoord 14, autoriteit 5%

Wat voor mij werkte, was het importeren met Router bovenaan mijn bestand;

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

Gebruik het vervolgens om de geëxporteerde functie onder aan mijn bestand in te pakken;

export default withRouter(WebSitePageTitleComponent)

Hierdoor kreeg ik toegang tot de geschiedenisprop van de router. Volledige voorbeeldcode hieronder!

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)

Antwoord 15, autoriteit 2%

Gewoon zo gebruiken

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

Antwoord 16, autoriteit 2%

De enige oplossing die voor mij werkte, was de meest eenvoudige. Geen extra invoer nodig.

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

Tks, IamMHussain

Antwoord 17, autoriteit 2%

React Router gebruikt de HTML5 History-API, die voortbouwt op de browsergeschiedenis-API om een ​​interface te bieden die we gemakkelijk kunnen gebruiken in React-apps. History API. Dus zonder iets te importeren (useHistory, etc)

voor functionele component:

<button onClick={()=>{ window.history.back() }}> Back </button>

voor klascomponent:

<button onClick={()=>{ this.window.history.back() }}> Back </button>

Antwoord 18

Noem de volgende component zo aan:

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

En hier is het onderdeel:

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

Ik gebruik:

"react": "15.6.1"
"react-router": "4.2.0"

Antwoord 19

Ik wil de vorige antwoorden een beetje bijwerken.
Als je react-router >v6.0gebruikt, dan is de useHistory()niet de juiste manier om terug te gaan. U krijgt een foutmelding omdat ik vermoed dat useHistory()niet aanwezig is in de nieuwste versie.
Dus dit is het bijgewerkte antwoord

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";
function App() {
  const navigate = useNavigate();
  return (
    <>
      <button onClick={() => navigate(-2)}>
        Go 2 pages back
      </button>
      <button onClick={() => navigate(-1)}>Go back</button>
      <button onClick={() => navigate(1)}>
        Go forward
      </button>
      <button onClick={() => navigate(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}

Gebruik deze useNavigate()hook.
U kunt het officiële document voor deze overgang van v5naar v6hier lezen
https://reactrouter.com/docs/en/v6/upgrading/v5

Antwoord 20

Dit stukje code zal het voor je doen.

this.context.router.history.goBack()

Antwoord 21

Op react-router-domv6

import { useNavigate } from 'react-router-dom';
function goBack() {
  const navigate = useNavigate();
  return <button onClick={() => navigate(-1)}>go back</button>
}

Antwoord 22

Volgens https://reacttraining.com/react-router/web/api /geschiedenis

Voor "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,
};