How do I use the Link component in React Router?

How do I use the Link component in React Router?

To use the Link component in React Router, first import it from 'react-router-dom'. Then, you can use it to navigate between routes.

Can you show me a code example?

Sure! Here's a simple example:

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

function Navigation() {
  return (
    <nav>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About</Link>
    </nav>
  );
}

What if I want to pass props to the component I link to?

You can use the state prop in the Link component to pass props. For example:

<Link to={{ pathname: '/about', state: { from: 'home' } }}>About</Link>

How do I access those props in the target component?

In the target component, you can access the props using the location object from the react-router-dom. For example:

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

function About() {
  const location = useLocation();
  console.log(location.state); // { from: 'home' }
}