Selesai: params url penghala bertindak balas

Masalah utama yang berkaitan dengan param URL Penghala React ialah ia boleh menjadi sukar untuk digunakan dalam laluan dinamik. Ini kerana param URL adalah statik dan tidak boleh diubah selepas laluan dibuat. Ini bermakna jika pengguna perlu mengakses halaman berbeza dengan parameter berbeza, mereka perlu membuat laluan baharu untuk setiap gabungan parameter. Selain itu, apabila menggunakan param URL, mungkin sukar untuk menjejaki semua kombinasi yang mungkin dan memastikan setiap kombinasi dikendalikan dengan betul oleh penghala.

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

Kod ini menyediakan Penghala React untuk memaparkan halaman dengan nama pengguna daripada URL.

1. Baris pertama mengimport komponen daripada perpustakaan DOM Penghala React.
2. Fungsi Apl mengembalikan komponen Penghala dengan komponen Laluan di dalamnya, yang menentukan bahawa mana-mana URL yang bermula dengan "/pengguna/" harus memaparkan komponen Halaman Pengguna.
3. Fungsi UserPage menggunakan useParams() untuk mendapatkan nama pengguna daripada URL dan kemudian memberikan salam menggunakan nama pengguna tersebut.

Param URL

Parama URL dalam Penghala React ialah kepingan data yang dihantar ke laluan sebagai sebahagian daripada URL. Mereka membenarkan pembangun menghantar maklumat dinamik ke laluan, seperti ID atau rentetan pertanyaan. Ini boleh digunakan untuk mencipta laluan dinamik yang boleh digunakan untuk perkara seperti memaparkan item tertentu daripada pangkalan data atau menapis kandungan berdasarkan input pengguna. React Router menyediakan alatan untuk mengakses dan memanipulasi param URL, menjadikannya mudah untuk menggunakannya dalam aplikasi anda.

Bagaimanakah anda mendapatkan param URL daripada laluan dalam React

Dalam Penghala React, anda boleh mengakses param URL dari laluan menggunakan cangkuk useParams. Cangkuk ini mengembalikan objek yang mengandungi pasangan nilai kunci parameter URL. Contohnya, jika laluan anda ialah /user/:id, anda boleh mengakses parameter id dengan useParams().id.