React Router V6: Panduan Pemula '

Tutorial ini menyediakan panduan komprehensif untuk React Router V6, perpustakaan penghalaan utama untuk aplikasi React. Ketahui cara menguruskan URL dan navigasi dengan cekap dalam projek React anda.

Titik pembelajaran utama:

• Menguasai React Router V6: Panduan ini merangkumi asas -asas untuk menubuhkan dan menggunakan Router React V6 untuk navigasi dan pengurusan URL yang lancar dalam aplikasi React anda.
• navigasi dan rendering laluan: Ketahui cara membuat laluan dinamik dan bersarang menggunakan komponen teras seperti , <routes></routes>, dan <route></route>, termasuk penggunaan parameter laluan untuk routing fleksibel. <link>
• Teknik Routing Advanced: meneroka konsep lanjutan seperti laluan yang dilindungi, navigasi programatik dengan , dan peningkatan terbaru dalam reaksi router v6.4, membolehkan anda membina penyelesaian penghalaan yang canggih untuk aplikasi reaksi moden untuk aplikasi reaksi moden untuk aplikasi reaksi moden . useNavigate

Pengenalan:

React Excels di Bangunan Aplikasi Web Dinamik dengan Pelbagai Paparan (Halaman). Tidak seperti aplikasi multi-halaman tradisional, navigasi tidak boleh memuatkan semula keseluruhan halaman. Sebaliknya, pandangan harus dilakukan dengan lancar dalam halaman yang ada. React Router mencapai ini secara deklaratif, memastikan pengalaman pengguna yang lancar. Pengguna mengharapkan:

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:

Komponen

boleh diletakkan di mana -mana di dalam struktur aplikasi anda. Kesederhanaan komponen seperti

<code class="language-jsx"><route path="/about" element="{<About"></route>} /></code>

,

, dan API Router React lain menjadikan laluan mudah dilaksanakan. <route></route> <route></route> <link> Nota penting:

React Router adalah perpustakaan pihak ketiga yang dikekalkan oleh perisian remix, bukan produk Facebook/Meta rasmi.

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:

<code class="language-jsx"><route path="/about" element="{<About"></route>} /></code>

Buat projek React baru menggunakan Create React App:

<code class="language-bash">node -v
npm -v</code>

Pasang React Router Dom:

<code class="language-bash">npx create-react-app react-router-demo
cd react-router-demo</code>

Mulakan pelayan pembangunan:

<code class="language-bash">npm install react-router-dom</code>

aplikasi React anda dengan Router React kini berjalan di

. http://localhost:3000/

React Asas Router:

kami akan membuat aplikasi dengan tiga pandangan: rumah, kategori, dan produk.

komponen penghala

Balut komponen aplikasi utama anda dengan penghala:

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

<code class="language-bash">npm start</code>

Objek Sejarah

Setiap penghala mencipta objek sejarah yang menguruskan timbunan navigasi. Perubahan ke lokasi pencetus semula.

(Hook) menyediakan fungsi useNavigate untuk navigasi programatik. navigate

Komponen pautan dan laluan

membuat UI jika lokasi sepadan dengan laluan. <route></route> Menyediakan navigasi tanpa reloads halaman. <link>

UPDATE

: App.js

<code class="language-jsx">// src/index.js
import { BrowserRouter } from 'react-router-dom';
// ...
root.render(
  <react.strictmode>
    <browserrouter>
      <app></app>
    </browserrouter>
  </react.strictmode>
);</code>

Ini menetapkan navigasi dan penghalaan asas.

Routing bersarang:

Laluan sarang dengan meletakkan

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

:

App.js

Buat

<code class="language-jsx">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</li>
          <li>
<link to="/categories">Categories</li>
          <li>
<link to="/products">Products</li>
        </ul>
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/categories" element="{<Categories"></route>} />
        <route path="/products" element="{<Products"></route>} />
      </routes>
    </div>
  );
}</code>

:

Categories.js

komponen

<code class="language-jsx">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>} />
        <route path="/categories" element="{<Categories"></route>}>
          <route path="desktops" element="{<Desktops"></route>} />
          <route path="laptops" element="{<Laptops"></route>} />
        
        <route path="/products/*" element="{<Products"></route>} /> {/* Note the trailing * */}
      </routes>
    </div>
  );
}</code>

membuat laluan kanak -kanak dalam laluan induk.

<outlet></outlet>

Routing bersarang dinamik:

Gunakan parameter laluan untuk membuat laluan dinamik. Tambah trailing

ke laluan induk untuk membolehkan laluan kanak -kanak. Gunakan

untuk mengakses parameter. * useParams UPDATE

:

Products.js

parameter

<code class="language-jsx">import { Link, Outlet } from 'react-router-dom';

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

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

diakses dalam komponen

menggunakan :productId. Product useParams

melindungi laluan:

Gunakan

untuk pengalihan programatik dan buat komponen

tersuai. useNavigate PrivateRoute Buat

:

PrivateRoute.js

Tambah komponen

<code class="language-jsx">// ... (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>} />
      <route index element="{<p">Please select a product.} />
    </route></routes>
  </div>
);

// ... Product component ...</code>

dan mengintegrasikan

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

React Router v6.4 dan seterusnya:

React Router v6.4 Memperkenalkan pemuatan data dan mutasi API (diilhamkan oleh remix). API ini memudahkan pengambilan data dan pengurusan dalam laluan menggunakan pemuat dan tindakan. Bahagian ini memerlukan penjelasan yang berasingan dan lebih terperinci.

Ringkasan:

Tutorial ini memberikan gambaran menyeluruh mengenai React Router V6, yang meliputi konsep penghalaan asas dan maju. Ingatlah untuk berunding dengan dokumentasi Router React rasmi untuk maklumat dan butiran yang paling terkini.

Atas ialah kandungan terperinci React Router V6: Panduan Pemula '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!