The useHistory hook in react router v5 vs the useNavigate hook in react router v6.

Simeon Offiong — Tue, 06 Sep 2022 15:12:34 +0000

React Router DOM is an npm package ( npm - node package manager) that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.

In this article I will be concentrating on the UseNavigate in v6 and the useHistory in v5 react router.

Basic installation:
React router dom can be install in react applications using the following package managers.

npm install react-router-dom
yarn add react-router-dom

Reacently, a newer version of react router dom was introduced, that is the react-router-dom@v6.
The useNavigate() hook is introduced in the React Router v6 to replace the useHistory() hook. In the earlier version, the useHistory() hook accesses the React Router history object and navigates to the other routers using the push or replace methods. It helps to go to the specific URL, forward or backward pages.

useHistory
The useHistory hook gives you access to the history instance that you may use to navigate.
Below is a code snippet to show the useHistory hook.

useNavigate
The useNavigate hook returns a function that lets you navigate programmatically.
Below is a code snippet to show the useNavigate hook.

As we can see from the code snippets showing the implementation of the useHistory hook in react router v5 and the useNavigate hook in react router v6.
One can easily conclude that the implementation of the useNavigate which replaces the useHistory is simple to implement, and in the useNavigate hook the use of the (.push ) method is no longer needed.

I hope you find this helpful.❤️

Got questions? Send me a message.

Kindly follow me on the following platforms👏
Linkedin
Twitter
Medium
DEV
Facebook
Instagram

DEV Community: Simeon Offiong

The useHistory hook in react router v5 vs the useNavigate hook in react router v6.