Understanding Nested Routing in React

This tutorial demonstrates nested routing in React applications using React Router. We'll build a simple website to illustrate the concept and implementation.

Understanding Nested Routes

Before diving into the code, let's examine the website's structure. The main navigation includes links to a Home page, a Dashboard, and a Products section. Home and Dashboard have simple routes (/home, /dashboard). The Products section, however, utilizes nested routes for better organization. Within the Products section, we'll have routes for searching, viewing a product list, adding a new product, and viewing individual product details. These nested routes will be structured under /products, resulting in paths like /products/add, /products/all, and /products/search.

Setting Up the Project

We'll use a project structure with components organized in folders. Create the following files:

• Home.js, Dashboard.js (in a components folder)
• Products.js, AddProduct.js, ProductsList.js, SingleProduct.js, ProductSearch.js (all within a components/products folder).

Installing React Router

Install the necessary package: npm install react-router-dom

Implementing Routes in App.js

The App.js file will contain the main routing configuration. First, import the necessary components:

import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./components/Home";
import Products from "./components/products/Products";
import Dashboard from "./components/Dashboard";
import ProductsSearch from "./components/products/ProductsSearch";
import AddProduct from "./components/products/AddProduct";
import SingleProduct from "./components/products/SingleProduct";
import ProductsList from "./components/products/ProductsList";

Next, define the routes within the App component:

function App() {
  return (
    <router>
      <nav>
        <link to="/">Home
        <link to="/dashboard">Dashboard
        <link to="/products/search">Products
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/dashboard" element="{<Dashboard"></route>} />
        <route path="/products" element="{<Products"></route>}>
          <route path="search" element="{<ProductsSearch"></route>} />
          <route path="list" element="{<ProductsList"></route>} />
          <route path="add" element="{<AddProduct"></route>} />
          <route path=":id" element="{<SingleProduct"></route>} />
        
      </routes>
    </router>
  );
}

export default App;

Notice how the nested routes for /products are defined as children of the /products route. This creates the nested structure. The :id parameter in the SingleProduct route allows for dynamic routing based on a product ID.

Dynamic Routes and Data Fetching

The SingleProduct component will likely need to fetch data based on the id parameter. You can use useParams hook from react-router-dom to access this parameter. Remember to replace the example data with your actual data fetching mechanism.

Conclusion

This tutorial provides a practical example of nested routing in React. By carefully structuring your routes, you can create well-organized and maintainable React applications. The complete source code (though not included here for brevity) can be adapted and expanded upon to suit your specific needs. Remember to consult the React Router documentation for more advanced features and options.

The above is the detailed content of Understanding Nested Routing in React. For more information, please follow other related articles on the PHP Chinese website!