How do I navigate programmatically in React Router?

How do I navigate programmatically in React Router?

You can use the useNavigate hook from React Router to navigate programmatically. Would you like an example?

Yes, please provide an example of how to use useNavigate.

Sure! First, import useNavigate from 'react-router-dom'. Then, you can call it inside your component like this:

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

const MyComponent = () => {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate('/target-path');
    };

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

What if I want to pass state while navigating?

You can pass state as a second argument to the navigate function like this:

navigate('/target-path', { state: { myData: 'example' } });