了解React中的嵌套路由

該教程使用React路由器在反應應用中演示了嵌套路由。 我們將構建一個簡單的網站來說明概念和實現。

>

理解嵌套路由

>進入代碼之前，讓我們檢查網站的結構。 主要導航包括指向主頁，儀表板和產品部分的鏈接。 主頁和儀表板具有簡單的路由（/home，/dashboard）。 但是，“產品”部分利用嵌套路線進行更好的組織。 在產品部分中，我們將有用於搜索，查看產品列表，添加新產品以及查看單個產品詳細信息的路線。 這些嵌套的路線將在/products>下結構，從而導致/products/add>，/products/all和/products/search。

等路徑

> 設置項目

>

>我們將使用一個項目結構，其中包括在文件夾中組織的組件。 創建以下文件：

• Home.js，Dashboard.js（在Acomponents文件夾中）
>
• Products.js，AddProduct.js，ProductsList.js，SingleProduct.js，ProductSearch.js（全部在acomponents/products>文件夾中）。

安裝React Router

>

安裝必要的軟件包：npm install react-router-dom

>在app.js

中實現路由

App.js文件將包含主要路由配置。 首先，導入必要的組件：

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";

接下來，定義App組件中的路由：>>>>

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;

請注意，如何將

的嵌套路線定義為路線的子女。 這創建了嵌套的結構。 /products路由中的/products參數允許基於產品ID的動態路由。 :id SingleProduct

>動態路由和數據獲取

>

組件可能需要基於

>參數獲取數據。 您可以使用SingleProduct>的鉤子訪問此參數。 請記住用您的實際數據獲取機制替換示例數據。 id useParamsreact-router-dom結論

本教程提供了一個在React中嵌套路由的實踐示例。 通過仔細構建路線，您可以創建組織良好且可維護的反應應用程序。 可以對完整的源代碼（儘管此處不包含在這裡）進行調整和擴展以適合您的特定需求。 請記住要查閱React路由器文檔以獲取更高級的功能和選項。

以上是了解React中的嵌套路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！