How To Programmatically Navigate Using React Router Dom

In React applications, navigation between different views or pages is a common requirement. React Router DOM provides a powerful solution for managing routing in React applications.

While navigation based on user interaction, such as clicking links, is straightforward, there are scenarios where you need to navigate programmatically, such as after form submission or based on certain conditions in your application logic. In this tutorial, we’ll explore how to achieve programmatic navigation using React Router DOM which is very easy.

Use useNavigate Hook to Navigate Programmatically

React Router provides a hook called useNavigate that you can use to navigate programmatically. Here is an example:

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

function GoHome() {
    const navigate = useNavigate();

    const handleClick = () => {
        // navigate to a different route
        navigate('/home');
    };

    return <button onClick={handleClick}>Go home</button>;
}