If you are having trouble with the How To Go Back To The Previous Page With React Router problem, don’t miss our article. This article will give you some solutions for returning to the previous page with React router. Read on it now!

What Can We Do To Go Back To The Previous Page With React Router?

Method 1: Utilize the useHistory hook

You can go back to the previous page with React router by utilizing the useHistory hook.

Syntax of the useHistory hook:

import { useParams } from "react-router-dom";
// In a functional component
export default function SomeComponent(props){
    const params = useParams();
}

The URL parameters are specified in the Route URL as shown below:

<Route path="/profile/:userName" component={Profile} />

There is a colon (“:”) after “/profile/”. It indicates that “userName” is a dynamic variable or parameter. For instance, “johndoe” is the value of the parameter “userName” in the url “/profile/johndoe”. In this instance, useParams() returns the following object:

{
   userName: "johndoe"
}

Let’s look at the following example to understand more about this method:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory
} from "react-router-dom";

const Foo = () => {
  const history = useHistory();
  return (
    <div>
      <button onClick={history.goBack}>Back</button>
      <p>foo</p>
    </div>
  );
};

const Bar = () => {
  const history = useHistory();
  return (
    <div>
      <button onClick={history.goBack}>Back</button>
      <p>bar</p>
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/foo">foo</Link>
          </li>
          <li>
            <Link to="/bar">bar</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/foo" children={<Foo />} />
          <Route path="/bar" children={<Bar />} />
        </Switch>
      </div>
    </Router>
  );
}

In the above instance, the useHistory hook is called by the Foo and Bar components called. In both Foo and Bar, the history.goBack method is set as the value of the onClick prop. History.goBack allows us to go back to the previous page.

There are two links to go to /foo and /bar, respectively, in App. And when we go to /foo and /bar, we have 2 Routes set to render Foo and Bar.

The.push(),.pop(), and.replace() methods can also be used to modify the URL as necessary. The goBack() method of the history instance allows us to return to the previous page as shown below:

function NavigateHome() {
  let history = useHistory();
  function handleClick() {
    history.push("/somePage");
  }
  function goBack() {
    history.goBack();
  }
    return (
    <div>
    <button onClick={handleClick}>
       Go to some page
    </button>
    <button onClick={goBack}>
       Go back
    </button>
    </div>
  );
}

Method 2: Utilize the navigate(-1)

To go back to the previous version, first import useNavigate from react-router-dom. After that, use navigate(-1). You will likely need to use the navigate(-2) if you want to go back two pages. Navigate using a positive number, such as navigate(1) to go forward one page, and navigate(2) to go forward two pages. Look at the example below:

import { useNavigate } from 'react-router-dom'; // Import react-route-dom
function App() {
  const navigate = useNavigate(); // make const
  return (
    <>
      <button onClick={ () => navigate(-2) }>Go 2 pages back</button>
      <button onClick={ () => navigate(-1) }>Go 1 pages back</button>
      <button onClick={ () => navigate(1) }>Go 1 Page forward</button>
      <button onClick={ () => navigate(2) }>Go 2 pages forward</button>
    </>
  );
}

Conclusion

You can always reread this post when you’re still stuck on How To Go Back To The Previous Page With React Router. The options mentioned above are the quickest. In addition, if you still need help or have problems, please leave your comment below. Thank you for reading!

Read more

→ How To Programmatically Update Query Params In React Router?