React Router: A Guide to Navigation and Dynamic Routing

Introduction to React Router

React Router is a popular library used for adding navigation and routing capabilities to React applications. It allows you to:

Create single-page applications (SPAs).
Navigate between pages without reloading.
Dynamically load content based on the URL.

Installing and Setting Up React Router

Installation

To use React Router, install the library via npm or yarn:

npm install react-router-dom

Or, if you use yarn:

yarn add react-router-dom

Setting Up React Router

Import BrowserRouter and wrap your app with it.
Define your routes using Routes and Route.

Basic Setup Example

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explanation:

BrowserRouter manages the history and URL.
Routes is a container for all your Route components.
Route maps a URL path to a specific component.

Navigating Between Pages

React Router provides the Link and NavLink components for navigation.

Using the Link Component

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

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

Using the NavLink Component

The NavLink adds styling to indicate the active link.

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

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

Example with Navbar

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Dynamic Routing

Dynamic routing is useful for creating routes with parameters, such as user profiles or product details.

Defining a Dynamic Route

Use the : syntax to define a dynamic segment in the path.

function Product({ params }) {
  const { id } = params;
  return <h1>Product ID: {id}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

Accessing Route Parameters

React Router’s useParams hook retrieves the dynamic values.

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

function Product() {
  const { id } = useParams();
  return <h1>Product ID: {id}</h1>;
}

Example: Dynamic Product List

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function ProductList() {
  const products = [
    { id: 1, name: 'Product A' },
    { id: 2, name: 'Product B' },
  ];

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <Link to={`/product/${product.id}`}>{product.name}</Link>
        </li>
      ))}
    </ul>
  );
}

function Product() {
  const { id } = useParams();
  return <h1>Details for Product ID: {id}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ProductList />} />
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Best Practices for React Router

Use NavLink for Navigation: Highlight active links for better UX.
Organize Routes: Use separate components or files for routes in larger apps.
Lazy Load Components: For performance, load components dynamically using React.lazy and Suspense.
Fallback Route: Use a wildcard (*) route to handle undefined paths.

<Route path="*" element={<NotFound />} />

SEO Considerations: Ensure proper meta tags and server-side rendering for better SEO.