Selesai: menambah parameter pada penghala tindak balas url

Laman Utama » JavaScript » Penghala React » Selesai: menambah parameter pada penghala react url

Masalah utama yang berkaitan dengan menambah parameter ke URL React Router ialah parameter boleh dimanipulasi dengan mudah oleh pengguna. Ini boleh membawa kepada isu keselamatan, kerana pengguna berniat jahat berpotensi menggunakan parameter untuk mendapatkan akses kepada sumber atau data yang tidak dibenarkan. Selain itu, jika nilai parameter tidak disahkan dengan betul, ia boleh membawa kepada tingkah laku yang tidak dijangka dalam aplikasi. Akhir sekali, jika terlalu banyak parameter ditambahkan, ia boleh menyebabkan isu prestasi disebabkan peningkatan kerumitan URL.

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. import { BrowserRouter sebagai Router, Route, Link, useParams } daripada "react-router-dom";
// Ini mengimport komponen daripada perpustakaan react-router-dom yang akan digunakan dalam kod ini.

2. // Ini mencipta komponen penghala yang akan mengendalikan navigasi antara laluan yang berbeza.

3. // Ini mencipta laluan dengan parameter dinamik 'nama pengguna'.

4. // Ini menjadikan komponen Pengguna apabila laluan ini dipadankan.

5. John // Ini mencipta pautan ke laluan /user/john yang akan menjadikan komponen Pengguna dengan 'john' sebagai parameter nama pengguna apabila diklik.

6. function User() { //Ini ialah komponen berfungsi yang mengambil nama pengguna sebagai hujah dan menjadikannya di dalam teg div apabila dipanggil dengan mengklik pada Pautan di atasnya .

7. biarkan { nama pengguna } = useParams(); //Ini menggunakan pemusnahan untuk mendapatkan akses kepada nama pengguna daripada useParams().

8. kembali (

); //Ini mengembalikan elemen div yang mengandungi apa-apa nilai yang dihantar ke nama pengguna yang dalam kes ini akan menjadi 'john'.

Apakah penghala React

React Router ialah perpustakaan penghalaan untuk aplikasi React. Ia menyediakan komponen teras dan fungsi yang diperlukan untuk mencipta aplikasi satu halaman (SPA) dengan navigasi antara halaman yang berbeza. Ia membolehkan pembangun mentakrifkan laluan, iaitu laluan yang memetakan kepada komponen tertentu dalam aplikasi. React Router juga menyediakan ciri seperti ubah hala, padanan laluan dinamik dan parameter pertanyaan.

Parameter ke URL

Parameter ke URL dalam Penghala React membenarkan pembangun menghantar data dinamik daripada URL ke komponen React. Ini berguna untuk mencipta laluan dinamik yang boleh digunakan untuk memaparkan kandungan berbeza berdasarkan parameter yang diluluskan dalam URL. Sebagai contoh, laluan seperti "/user/:id" boleh digunakan untuk memaparkan halaman profil pengguna dengan parameter id yang diluluskan dalam URL. Parameter juga boleh digunakan untuk menapis data atau operasi lain yang memerlukan data dinamik daripada URL.

Bagaimanakah cara saya menambah parameter pada URL dalam React

Menambah parameter pada URL dalam React Router dilakukan menggunakan objek "params". Objek ini membolehkan anda menghantar pasangan nilai kunci yang akan ditambahkan pada URL. Untuk menambah parameter, cuma tambahkannya pada objek params seperti:

const params = { param1: 'value1', param2: 'value2' };

Kemudian, apabila mencipta laluan anda, anda boleh memasukkan objek params sebagai hujah seperti itu:

Parameter kemudiannya akan ditambahkan pada URL apabila menavigasi ke laluan ini.