Mengakses Parameter Laluan Dinamik dengan useParams Hook dalam React

gunakan Params Hook dalam React

Kait useParams adalah sebahagian daripada Penghala Reaksi dan digunakan untuk mengakses parameter dinamik daripada URL semasa. Cangkuk ini amat berguna apabila anda mempunyai laluan dengan segmen dinamik, seperti ID pengguna, ID produk atau data pembolehubah lain yang dibenamkan dalam laluan laluan.

Sebagai contoh, jika anda sedang membina blog dan ingin memaparkan siaran tertentu berdasarkan IDnya, anda akan menggunakan useParams untuk mengambil ID siaran daripada URL dan memaparkan siaran yang sepadan.

---

Cara penggunaanParams Berfungsi

• useParams mengembalikan objek yang mengandungi pasangan nilai kunci parameter dinamik daripada laluan semasa.
• Kunci dalam objek sepadan dengan nama parameter laluan (dinyatakan dalam laluan laluan) dan nilainya ialah nilai sebenar daripada URL.

Sintaks:

const params = useParams();

Pemulangan:

• Objek dengan pasangan nilai kunci, dengan kuncinya ialah nama parameter dan nilainya ialah nilai parameter daripada URL.

---

Contoh 1: Penggunaan Asas useParams

Katakan anda mempunyai laluan untuk memaparkan profil pengguna, di mana laluannya adalah /profile/:userId dan :userId ialah segmen dinamik.

Langkah 1: Tentukan Laluan dengan Parameter Dinamik

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UserProfile from './UserProfile';

const App = () => {
  return (
    <router>
      <routes>
        <route path="/profile/:userId" element="{<UserProfile"></route>} />
      </routes>
    </router>
  );
};

export default App;

Langkah 2: Gunakan useParams untuk Mengekstrak ID pengguna

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extracts the userId from the URL

  return (
    <div>
      <h2 id="User-Profile">User Profile</h2>
      <p>Displaying details for user with ID: {userId}</p>
    </div>
  );
};

export default UserProfile;

Penjelasan:

• Apabila URL ialah /profile/123, cangkuk useParams akan mengembalikan { userId: '123' }.
• Id pengguna kemudiannya digunakan untuk memaparkan maklumat khusus untuk pengguna tersebut dalam komponen UserProfile.

---

Contoh 2: Menggunakan Berbilang Parameter

Anda boleh mempunyai berbilang parameter dinamik dalam laluan dan useParams akan mengembalikan kesemuanya.

Langkah 1: Tentukan Laluan dengan Berbilang Parameter Dinamik

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import PostDetail from './PostDetail';

const App = () => {
  return (
    <router>
      <routes>
        <route path="/post/:postId/comment/:commentId" element="{<PostDetail"></route>} />
      </routes>
    </router>
  );
};

export default App;

Langkah 2: Gunakan useParams untuk Mengekstrak Berbilang Parameter

import React from 'react';
import { useParams } from 'react-router-dom';

const PostDetail = () => {
  const { postId, commentId } = useParams(); // Extracts postId and commentId from the URL

  return (
    <div>
      <h2 id="Post-Details">Post Details</h2>
      <p>Post ID: {postId}</p>
      <p>Comment ID: {commentId}</p>
    </div>
  );
};

export default PostDetail;

Penjelasan:

• Apabila URL ialah /post/456/comment/789, cangkuk useParams akan mengembalikan { postId: '456', commentId: '789' }.
• Komponen kemudiannya memaparkan ID siaran dan ID ulasan berdasarkan parameter URL.

---

Contoh 3: Menggunakan useParams dengan Parameter Pilihan

Anda juga boleh mengendalikan parameter pilihan dengan menentukan laluan dengan parameter yang boleh disertakan secara pilihan.

Langkah 1: Tentukan Laluan dengan Parameter Pilihan

const params = useParams();

Langkah 2: Kendalikan Parameter Pilihan dalam useParams

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UserProfile from './UserProfile';

const App = () => {
  return (
    <router>
      <routes>
        <route path="/profile/:userId" element="{<UserProfile"></route>} />
      </routes>
    </router>
  );
};

export default App;

Penjelasan:

• Dalam kes ini, parameter pertanyaan adalah pilihan (ditandakan dengan ? dalam laluan).
• Jika URL ialah /search/books, useParams akan mengembalikan { query: 'books' }.
• Jika URL ialah /search, useParams akan mengembalikan {} (iaitu, tiada pertanyaan) dan mesej "Tunjukkan semua hasil" dipaparkan.

---

Bila Gunakan useParams

• Laluan Dinamik: Apabila anda mempunyai struktur URL yang merangkumi segmen dinamik (cth., /users/:userId, /products/:productId).
• Mengambil Data: Apabila anda perlu mengambil data berdasarkan nilai dinamik dalam URL (cth., mengambil profil pengguna, butiran produk atau catatan blog melalui ID).
• Laluan Bersarang: Dalam senario di mana laluan bersarang mempunyai parameter dinamik dan anda perlu mengekstrak nilai daripada URL.

---

Batasan penggunaanParams

• Keadaan Tidak Berterusan: useParams hanya mendapatkan semula parameter daripada URL. Ia tidak menyimpan atau memeliharanya selepas pertukaran laluan. Jika anda perlu menjejaki parameter, anda mungkin perlu menggunakan pengurusan keadaan atau cangkuk lain (cth., useState, useEffect).
• Tiada Parameter Pertanyaan: Jika anda perlu membaca parameter pertanyaan (cth., ?sort=asc), gunakan cangkuk useLocation dan bukannya useParams.

---

Kesimpulan

Kait useParams ialah cara yang mudah dan berkesan untuk mengakses parameter dinamik daripada URL dalam komponen React anda. Ia menjadikan kerja dengan laluan dinamik lebih mudah dan membolehkan anda membina aplikasi yang lebih fleksibel dan dinamik.

---

Atas ialah kandungan terperinci Mengakses Parameter Laluan Dinamik dengan useParams Hook dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!