Perjalanan Reaksi Saya: Hari ke-27

Penghala Reaksi

Tumpuan hari ini adalah untuk menguasai Penghala React, alat utama untuk membina navigasi yang lancar dalam aplikasi satu halaman React (SPA). Biar saya membimbing anda melalui perjalanan pembelajaran dan penemuan saya!

Apa yang Saya Pelajari daripada Membina Navigasi dengan Penghala Reaksi
1. Persediaan dan Pemasangan:
Untuk mula menggunakan React Router, saya memasang perpustakaan dengan:

npm install react-router-dom

Seterusnya, saya mengimport modul yang diperlukan:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

2.Membuat Laluan:
Saya mencipta laluan menggunakan createBrowserRouter, menentukan laluan dan memautkannya kepada komponen tertentu.

Contoh:

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/profiles', element: <ProfilesPage /> },
  { path: '/profiles/:profileId', element: <ProfilePage /> },
]);

• URL Dinamik: Laluan laluan:'/profiles/:profileId' menunjukkan penghalaan dinamik. Ia membolehkan saya memaparkan halaman profil unik berdasarkan profilId.
• Pengendalian Ralat: Menambah errorElement memastikan pengguna yang menavigasi ke URL yang tidak sah melihat halaman 404 Not Found.

3. Mengendalikan Ralat 404:
Saya mencipta halaman ralat tersuai (NotFoundPage.jsx) menggunakan komponen React Router's Link:

<Link to="/">Home</Link>

Ini membolehkan navigasi kembali ke halaman utama tanpa muat semula penyemak imbas penuh, mengekalkan pengalaman SPA.

4.Pemetaan Komponen Secara Dinamik:
Dalam ProfilesPage.jsx, saya menggunakan kaedah peta untuk menjana pautan secara dinamik untuk setiap profil:

{profiles.map((profile) => (
  <Link key={profile} to={`/profiles/${profile}`}>
    Profile {profile}
  </Link>
))}

Ini menjadikannya berskala kerana profil baharu boleh ditambah tanpa menulis semula kod.

5. Struktur Halaman:
Setiap halaman/komponen mempunyai tujuan tertentu:

• Halaman Utama: Memaparkan kandungan lalai apabila pengguna melawat /.
• Halaman Profil: Menyenaraikan pautan ke profil individu.
• Halaman Profil: Memaparkan pemegang tempat untuk kandungan dinamik yang berkaitan dengan profil tertentu.
• NotFoundPage: Mengendalikan URL yang tidak sah, meningkatkan pengalaman pengguna.

6.Mengelakkan Penyegaran Halaman Penuh:
Saya mengetahui bahawa menggunakan komponen bukannya tag menghalang muat semula halaman penuh yang tidak perlu. Ini memastikan aplikasi pantas dan responsif.

7.Memaparkan Paparan Bersarang:
Dengan Penghala Reaksi, saya boleh memaparkan komponen atau reka letak bersarang dengan mudah dengan menstrukturkan laluan saya dengan cekap.

Pemikiran Akhir
React Router ialah alat penting untuk membina SPA yang kaya dan mesra pengguna. Keupayaannya untuk menghalakan secara dinamik, mengendalikan ralat dengan anggun dan memastikan pengalaman navigasi yang lancar adalah berkuasa.

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari ke-27. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!