URL unik untuk setiap pandangan:
• Membenarkan penanda buku (mis., ). www.example.com/products butang belakang/ke hadapan berfungsi:
navigasi penyemak imbas standard harus berfungsi seperti yang diharapkan.
• URL untuk pandangan bersarang:
menyokong struktur dinamik, bersarang (mis.,
• ). example.com/products/shoes/101 React Router's Declarative Pendekatan Memudahkan Routing Dengan Menentukan Struktur Laluan yang Diinginkan:

<Route path="/about" element={<About />} />

, dan API Router React lain menjadikan laluan mudah dilaksanakan. <Route> <Route> <Link> Nota penting:

Gambaran Keseluruhan:

Tutorial ini merangkumi:

Menyediakan React dan React Router menggunakan NPM.

konsep penghalaan asas.
Routing bersarang.
Routing bersarang dinamik dengan parameter laluan.
Melaksanakan laluan yang dilindungi.
5. Kod projek lengkap tersedia di GitHub (pautan yang akan dimasukkan di sini).

Menyediakan Router React:

Anda perlu dipasang Node.js. Jika tidak, muat turun dari laman web rasmi Node.js. Pertimbangkan menggunakan pengurus versi untuk pengurusan Node.js yang lebih mudah. NPM (Pengurus Pakej Node) dibundel dengan Node.js. Sahkan pemasangan:

<Route path="/about" element={<About />} />

node -v
npm -v

npx create-react-app react-router-demo
cd react-router-demo

npm install react-router-dom

. http://localhost:3000/

React Asas Router:

atau BrowserRouter. HashRouter (menggunakan API Sejarah HTML5) biasanya lebih disukai untuk URL bersih: BrowserRouter

npm start

(Hook) menyediakan fungsi useNavigate untuk navigasi programatik. navigate

membuat UI jika lokasi sepadan dengan laluan. <Route> Menyediakan navigasi tanpa reloads halaman. <Link>

: App.js

// src/index.js
import { BrowserRouter } from 'react-router-dom';
// ...
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Routing bersarang:

komponen dalam komponen yang lain. Ini mencerminkan struktur URL bersarang. <Route> <Route> Ubah suai

App.js

import { Link, Route, Routes } from 'react-router-dom';
// ... component definitions for Home, Categories, Products ...
export default function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/categories">Categories</Link></li>
          <li><Link to="/products">Products</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/categories" element={<Categories />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </div>
  );
}

Categories.js

import { Link, Route, Routes } from 'react-router-dom';
import { Categories, Desktops, Laptops } from './Categories'; // Import nested route components

// ... other components ...

export default function App() {
  return (
    <div>
      {/* ... navigation ... */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/categories" element={<Categories />}>
          <Route path="desktops" element={<Desktops />} />
          <Route path="laptops" element={<Laptops />} />
        </Route>
        <Route path="/products/*" element={<Products />} /> {/* Note the trailing * */}
      </Routes>
    </div>
  );
}

<Outlet>

Gunakan parameter laluan untuk membuat laluan dinamik. Tambah trailing

untuk mengakses parameter. * useParams UPDATE

Products.js

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

export const Categories = () => (
  <div>
    <h2>Categories</h2>
    <nav>
      <ul>
        <li><Link to="desktops">Desktops</Link></li>
        <li><Link to="laptops">Laptops</Link></li>
      </ul>
    </nav>
    <Outlet />
  </div>
);

export const Desktops = () => <h3>Desktop PC Page</h3>;
export const Laptops = () => <h3>Laptops Page</h3>;

menggunakan :productId. Product useParams

Gunakan

tersuai. useNavigate PrivateRoute Buat

PrivateRoute.js

// ... (import statements and productData) ...

const Products = () => (
  <div>
    <h2>Products</h2>
    <ul> {/* ... linkList (generated from productData) ... */} </ul>
    <Routes>
      <Route path=":productId" element={<Product data={productData} />} />
      <Route index element={<p>Please select a product.</p>} />
    </Routes>
  </div>
);

// ... Product component ...

ke Login untuk melindungi laluan PrivateRoute. Ingatlah pertimbangan keselamatan yang disebut dalam respons asal. App.js /admin