snippetjavascriptreactCritical

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

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

youpagebackreacthistoryrouterconfigurehow

Problem

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

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

 Router.run(routes, function(Handler){
   var mountNode = document.getElementById('app');
   React.render( , 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 (
    <>
       navigate(-1)}>go back
       navigate(1)}>go forward
    
  );
}

Codesandbox sample (broken link)
Go back/forward multiple history stack entries:

 navigate(-2)}>go two back
 navigate(2)}>go two forward

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.

Code Snippets

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

Context

Stack Overflow Q#30915173, score: 123

Revisions (0)

No revisions yet.