Can we Programmatically navigate React Router using useNavigate hook?

Dear friends,

When we write react code,we may face a requirement to navigate React Router programmatically.Many of us have faced it in their coding journey.So I am going to explain how can we  programmatically navigate  React Router using useNavigate hook.

In order to implement it,we use useNavigate hook.So we will import useNavigate hook from react-router-dom.Please remember that  useNavigate hook introduced in React Router version 6.So it will not applicable if you are using React Router version below 6.

I will share a sample code to understand How to programmatically navigate  React Router 

import * as React from 'react';

import { useNavigate } from 'react-router-dom';

const ContactUsButton = () => {

  const navigate = useNavigate();

  const handleClick = () => navigate('/contact');

  return (

    <button type="button" onClick={handleClick}>

      Contact Us

    </button>

  );

}

I will list main steps to programmatically navigate  React Router using useNavigate hook

1.import { useNavigate } from 'react-router-dom'

2. const navigate = useNavigate();

3. const handleClick = () => navigate('/contact');

I hope,this small article will help you to use features of useNavigate hook.

Thanks