Memahami penghalaan bersarang dalam React

Tutorial ini menunjukkan penghalaan bersarang dalam aplikasi React menggunakan Router React. Kami akan membina laman web mudah untuk menggambarkan konsep dan pelaksanaan.

Memahami laluan bersarang

Sebelum menyelam ke dalam kod, mari kita periksa struktur laman web. Navigasi utama termasuk pautan ke halaman utama, papan pemuka, dan bahagian produk. Rumah dan papan pemuka mempunyai laluan mudah (

, /home). Bahagian produk, bagaimanapun, menggunakan laluan bersarang untuk organisasi yang lebih baik. Di dalam bahagian Produk, kami akan mempunyai laluan untuk mencari, melihat senarai produk, menambah produk baru, dan melihat butiran produk individu. Laluan bersarang ini akan disusun di bawah /dashboard, menghasilkan laluan seperti /products, /products/add, dan /products/all. /products/search

Menyediakan projek

Kami akan menggunakan struktur projek dengan komponen yang dianjurkan dalam folder. Buat fail berikut:

• , Home.js (dalam folder Dashboard.js) components
• , Products.js, AddProduct.js, ProductsList.js, SingleProduct.js (semua dalam folder ProductSearch.js). components/products

Memasang Router React

Pasang pakej yang diperlukan:

npm install react-router-dom

Melaksanakan laluan di app.js

Fail

akan mengandungi konfigurasi penghalaan utama. Pertama, import komponen yang diperlukan: 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";

Seterusnya, tentukan laluan dalam komponen

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

Perhatikan bagaimana laluan bersarang untuk

ditakrifkan sebagai kanak -kanak laluan /products. Ini mewujudkan struktur bersarang. Parameter /products dalam laluan :id membolehkan penghalaan dinamik berdasarkan id produk. SingleProduct

laluan dinamik dan pengambilan data

Komponen

mungkin perlu mengambil data berdasarkan parameter SingleProduct. Anda boleh menggunakan id cangkuk dari useParams untuk mengakses parameter ini. Ingatlah untuk menggantikan data contoh dengan mekanisme pengambilan data sebenar anda. react-router-dom

Kesimpulan

Tutorial ini memberikan contoh praktikal penghalaan bersarang dalam React. Dengan berhati-hati menstrukturkan laluan anda, anda boleh membuat aplikasi React yang teratur dan boleh dipelihara. Kod sumber lengkap (walaupun tidak termasuk di sini untuk keringkasan) boleh disesuaikan dan diperluas sesuai dengan keperluan khusus anda. Ingatlah untuk berunding dengan dokumentasi Router React untuk ciri dan pilihan yang lebih canggih.

Atas ialah kandungan terperinci Memahami penghalaan bersarang dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!