How do I use linking in React Router v6?

How do I use linking in React Router v6?

In React Router v6, you can use the <Link> component to create links to different routes. Here's a basic example:

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

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

What are the differences between Link and NavLink?

The <Link> component is used for navigation without any styling, while <NavLink> allows you to apply styles to the active link. For example:

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

function Navigation() {
  return (
    <nav>
      <NavLink to="/home" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
  );
}

Can I pass state through a Link?

Yes, you can pass state through a <Link> by using the state prop. Here's how:

<Link to={{ pathname: '/home', state: { fromDashboard: true } }}>Home</Link>

How do I handle navigation programmatically?

You can use the useNavigate hook for programmatic navigation. For example:

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

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

  const handleClick = () => {
    navigate('/home');
  };

  return <button onClick={handleClick}>Go Home</button>;
}