How can I implement programmatic navigation in React Router v6?

How can I implement programmatic navigation in React Router v6?

You can use the useNavigate hook from React Router v6 to programmatically navigate. Here's a simple example.

Can you show me a code snippet for that?

Sure! Here's a basic example:

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

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

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

    return <button onClick={handleClick}>Go to Target Route</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-route', { state: { myData: 'example' } });