All about React Router v6

React Router is a standard library for routing in React applications. With the release of version 6, there are some significant changes and improvements. In this blog post, we'll explore the basics of React Router v6 and how to use it in your React projects.

Installation

To get started with React Router v6, you can install it using npm or yarn:

npm install react-router-dom@next
# or
yarn add react-router-dom@next

Basic Usage

Once installed, you can use the BrowserRouter component to set up routing in your application. Here's a basic example:

// Import necessary modules
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Define your components
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

// Set up routes
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

In this example, we have three components (Home, About, and Contact) associated with different routes. The Routes component is used to define these routes within the BrowserRouter.

Route Parameters

React Router v6 introduces a simpler way to handle route parameters. You can access them directly in the component using the useParams hook. Here's an example:

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

const UserProfile = () => {
  const { username } = useParams();

  return (
    <div>
      <h2>User Profile</h2>
      <p>Username: {username}</p>
    </div>
  );
};

In this example, the useParams hook is used to extract the username parameter from the route.

These are just some basics to get you started with React Router v6. The library offers many more features, such as nested routes, route navigation, and route guarding. Check out the official documentation for more detailed information.