How do I use the Link component in React Router v6?

How do I use the Link component in React Router v6?

The Link component in React Router v6 is used to navigate between different routes in your application. You can import it from 'react-router-dom' and use it like this: <Link to='/path'>Link Text</Link>.

Can you show me a complete example?

Sure! Here's a simple example:

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to='/'>Home</Link>
        <Link to='/about'>About</Link>
      </nav>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

What are the benefits of using the Link component?

Using the Link component allows for client-side navigation without reloading the page, which improves performance and user experience.