Go back to previous page in React

React is a great library for building UIs, but it doesn’t have all the features of a full framework. Most importantly, it doesn’t have built-in routing features. That’s why we, React developers, use react-router to do routing in React.

Why do we need react-router?

React-router is useful because It provides features specifically for single page applications, and in general, for applications built in React. As you may know, sometimes web applications can have parts of React, but aren’t entirely built in it. In fact, most web applications follow this pattern.

SPAs are applications where the entire content is rendered on one page. But users see different combination of components by going from one page to another. React router plays a role in that. Users can go back to previous page using the browser ‘back’ button. This is simple enough and relies on history object. Every browser maintains history of user actions, and can easily take users back to previous page. But what if you want to take users back programmatically? In other words, what if you want to use JavaScript functions to take users to previous page in event handlers, or in the useEffect() hook? Don’t worry, react-router has you covered. SFE has many great guides on react-router and how to use it in React.

How to go back in react-router v6

Since version 6, developers can import useNavigate hook to navigate between different pages and URLs in React. Calling useNavigate() returns an instance of navigation function. You need to store it in a variable, and then use that variable throughout your application whenever you want to navigate users. Note that you don’t directly use the useNavigate() function. Instead, you create a variable and store the result of calling the useNavigate() hook. Let’s look at an example:

const navigate = useNavigate()
<button onClick={()=> navigate(“/hello-world”)}

In this case, clicking this button will take user to /hello-world URL. Argument to the navigation function specifies the relative path where user should go.

Now back to the topic. You can’t always know previous URL user was on, so you can’t pass it as an argument. However, react-router team gave us some way to take users to the previous page in React. You can simply pass -1 as argument. This will specify that you want users to go back to the previous page. SimpleFrontEnd has a really good article on how to go back to previous page in React.

In older versions of react-router, you can use the history object or useHistory hook to manually change the URL. I personally recommend you don’t do this anymore, because older versions are outdated and using them might break your application in the future.

If you’re working in class components, you might have to use the Navigate custom component. It can be imported from react-router as well. It accepts a to prop and whenever Navigate is rendered, it will automatically trigger a redirect to the specified page. You can also use it to take users back to the page they just came from.

You can also use lifecycle hooks to take users back to the page from which they came.