How do I navigate between pages using React Router?

How do I navigate between pages using React Router?

You can use the useNavigate hook from React Router to programmatically navigate between pages.

Can you show me an example of how to use useNavigate?

Sure! Here's a simple example:

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

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

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

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

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

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

navigate('/new-page', { state: { myData: 'some data' } });

How do I access that state in the new page?

You can access the state using the useLocation hook:

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

const NewPage = () => {
  const location = useLocation();
  const { myData } = location.state;
  return <div>{myData}</div>;
};