javascriptreactjsreact-router

react-router go back a page how do you configure history?


Can anyone please tell me how I can go back to the previous page rather than a specific route?

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

Get this error, goBack() was ignored because there is no router history

Here are my 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);
 });

Solution

  • React Router v6

    useNavigate Hook is the recommended way to go back now:

    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 sample (broken link)

    Go back/forward multiple history stack entries:

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

    Go to specific 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
    

    useNavigate replaces useHistory to support upcoming React Suspense/Concurrent mode better.