React is an excellent library, but it does not have navigation features to implement features like a button to go back to previous page. For that, you need ‘react-router’ or an alternative supporting library. I choose this library because it’s the most popular and very well integrated in React ecosystem. Without further ado, let’s explore how to implement go back feature in React.
useHistory hook
With the introduction hooks in React, many supporting libraries followed suit. That included React-Router version 5. useHistory was the most important hook introduced in the v5 release. useHistory gives you instant access to history, the object that contains information about navigation. Web developers always used history to access changes to the URL in React. From now on, you can use the useHistory hook to do the same.
Once you have the history object, you can use the goBack method to go back to previous page.
Remember that the hook only works if your app is a part of the react-router ecosystem.
history.goBack()
Using goBack() and similar methods only change the URL and do not reload the page. This is because the method uses react-router-dom uses the HTML5 History API under the hood. This is a more modern version of HTML API and allows you to do routing on the client side.
useHistory is still fine to use. It works for now, but the latest version of react-router-dom v6, introduced useNavigate hook to replace this feature. It provides a much simpler API to redirect to a specified URL in React.
useNavigate hook
This is the new tool for doing imperative routing in React. It’s important to note that there’s not only useNavigate, but also Navigate custom component you can use in class components.
Let’s start with useNavigate. It returns a function you can use to use for navigation. To navigate to a certain URL, you can simply call the navigation function and pass relative URL path as its argument.
Let’s assume navigate is a function returned by the useNavigate hook. If you pass it an argument of (-1) the function will navigate user to the previous page. The opposite is also true. If you pass it 1 as argument, then user will go ‘forward’ instead of going back.
Like the useHistory hook, useNavigate only works if the component is a part of the router ecosystem. More about that here.
Navigate custom component
If you’re working with class components, you can use Navigate custom component to take users to the previous page. Navigate custom components takes to prop, like the . If Navigate renders, user will be redirected to the URL specified specified in the to prop.
Other libraries
React router is not the only library to do this in React. There’s also Reach Router that provides a navigate function that also takes -1 as argument to go back to previous page. The library is new, but shows a lot of promise.
You can find many examples of how to go back to previous page in this guide.
Finally, you can skip using any library and stick with native window.history object. Modify it to redirect to a specified URL. Or use the back() method to take users to previous page. The method will not work if there isn’t a previous page. Also, using native window interface could be problematic for navigating single page applications.
Top comments (0)