React Router Basics

React Router is a popular library for managing client-side routing in React applications. It provides a simple and efficient way to handle navigation between different views or pages in your application. In this guide, we will cover the basics of React Router and provide examples to get you started.

Basic Example

To start using React Router, you need to install the react-router-dom package. You can do this by running the following command in your terminal:

npm install react-router-dom

Here is a simple example of how to use React Router to navigate between two pages:

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 
function Home() {
  return <h1>Welcome to the home page</h1>;
}
 
function About() {
  return <h1>Welcome to the about page</h1>;
}
 
function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

In this example, we define two components, Home and About, which represent the two pages in our application. We then define a nav element with links to these pages using the Link component from React Router. Finally, we define the routes for our application using the Routes and Route components.

Advanced Usage

React Router also provides more advanced features, such as nested routes and route parameters. Here is an example of how to use nested routes:

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';
 
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}
 
function Settings() {
  return <h2>Settings</h2>;
}
 
function Profile() {
  return <h2>Profile</h2>;
}
 
function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="settings" element={<Settings />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

In this example, we define a Dashboard component that contains an Outlet component, which is where the nested routes will be rendered. We then define two nested routes, settings and profile, which are rendered inside the Dashboard component.

Best Practices

Here are some best practices to keep in mind when using React Router:

• Use the BrowserRouter component as the top-level component in your application.
• Use the Link component to create links between pages.
• Use the Routes and Route components to define the routes for your application.
• Use the Outlet component to render nested routes.

Key Takeaways

Here are the key takeaways from this guide:

• React Router is a popular library for managing client-side routing in React applications.
• Use the BrowserRouter component as the top-level component in your application.
• Define routes using the Routes and Route components.
• Use the Link component to create links between pages.
• Use nested routes to render complex navigation hierarchies.