How can I use hooks for navigation in React Router?

How can I use hooks for navigation in React Router?

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

Yes, please provide an example of using useNavigate.

Sure! Here's a simple example:

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

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

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

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

This will navigate to /new-route when the button is clicked.

What if I want to pass state to the new route?

You can pass state as a second argument to navigate. For example:

navigate('/new-route', { state: { from: 'MyComponent' } });

You can then access this state in the new route using useLocation.