How do I use the useNavigate hook in React Router v6?

How do I use the useNavigate hook in React Router v6?

The useNavigate hook allows you to programmatically navigate between routes in your React application. You can use it like this:

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>;
};

Can I pass state to the new route using useNavigate?

Yes, you can pass state to the new route by providing a second argument to the navigate function. For example:

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

How do I access the passed state in the new component?

You can access the passed state in the new component using the useLocation hook from 'react-router-dom'. Here's how:

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

const NewComponent = () => {
  const location = useLocation();
  const state = location.state;

  return <div>Previous route: {state?.from}</div>;
};