How can I implement programmatic navigation in React Router v6?

How can I implement programmatic navigation in React Router v6?

In React Router v6, you can use the useNavigate hook for programmatic navigation. Would you like an example?

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

Sure! First, import useNavigate from 'react-router-dom'. Then, call it inside your component to get the navigate function. You can use it like this:

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 to the target route?

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

navigate('/target-route', { state: { from: 'home' } });