Question

How to programmatically navigate using React Router?

I’m using React Router in my project, and I need to navigate to a different route programmatically, such as after a form submission or a button click. I’ve come across terms like useNavigate and history, but I’m unsure how to implement this correctly in React Router. Can someone guide me?

Answer 1

In React Router v6, we can use the useNavigate hook to navigate programmatically.

1. Using useNavigate Hook (React Router v6+)

Example:

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

function MyComponent() {

  const navigate = useNavigate();

  const handleNavigate = () => {

    navigate('/about'); // Navigate to '/about'

  };

  return (

    <div>

      <button onClick={handleNavigate}>About</button>

    </div>

  );

}

navigate('/about'): This will navigate to the /about route.

The navigate function can also accept additional options, like replace or state.

Example with options:

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

function MyComponent() {

  const navigate = useNavigate();

  const handleNavigate = () => {

    navigate('/about', { replace: true, state: { from: 'home' } });

  };

  return (

    <div>

      <button onClick={handleNavigate}>Go to About</button>

    </div>

  );

}