Menguasai Parameter URL dan Rentetan Pertanyaan dalam Penghala Reaksi v6

Parameter URL dan Rentetan Pertanyaan dalam Penghala Reaksi v6

Parameter URL dan rentetan pertanyaan ialah aspek penting dalam pengurusan URL dalam aplikasi web. Mereka membenarkan anda menghantar data dinamik ke laluan yang berbeza dan mengurus penghalaan berdasarkan data tersebut. React Router v6 menyediakan sokongan lancar untuk mengendalikan parameter URL dan rentetan pertanyaan, membolehkan anda membina aplikasi yang lebih dinamik dan fleksibel.

---

1. Parameter URL dalam Penghala React v6

Parameter URL, juga dikenali sebagai parameter laluan atau parameter dinamik, ialah bahagian URL yang boleh digunakan untuk menangkap nilai dinamik. Ini biasanya digunakan untuk mengenal pasti sumber atau entiti tertentu.

Contoh Parameter URL:

Untuk laluan seperti /profile/:nama pengguna, bahagian nama pengguna ialah parameter URL.

Langkah 1: Tentukan Laluan dengan Parameter URL

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

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

Penjelasan:

• Nama pengguna dalam laluan /profile/:nama pengguna ialah parameter URL.
• Kait useParams digunakan di dalam komponen Profil untuk mengakses nilai parameter URL (nama pengguna).
• Apabila pengguna menavigasi ke /profile/john, nilai "john" akan dihantar sebagai parameter dan ia akan dipaparkan dalam komponen Profil.

Pengambilan Utama untuk Parameter URL:

• Padanan Laluan Dinamik: Parameter URL membolehkan anda memadankan laluan dinamik. Contohnya, /profile/:nama pengguna boleh sepadan dengan /profile/john atau /profile/sarah.
• Mengakses Parameter: Gunakan useParams untuk mengakses nilai parameter dalam laluan.

---

2. Rentetan Pertanyaan dalam Penghala Reaksi v6

Rentetan pertanyaan ialah pasangan nilai kunci yang muncul selepas ? dalam URL. Ia biasanya digunakan untuk menghantar maklumat tambahan kepada pelayan atau untuk mengubah suai gelagat halaman tanpa mengubah laluan.

Contoh Rentetan Pertanyaan:

Untuk URL seperti /search?query=React, rentetan pertanyaan ialah ?query=React.

Langkah 1: Mengendalikan Rentetan Pertanyaan dengan useLocation

Dalam React Router v6, rentetan pertanyaan boleh diakses menggunakan cangkuk useLocation. useLocation menyediakan akses kepada URL semasa, termasuk nama laluan, carian (rentetan pertanyaan) dan cincang.

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

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

Penjelasan:

• useLocation: Cangkuk ini menyediakan objek lokasi semasa, yang termasuk nama laluan, carian (rentetan pertanyaan) dan cincang.
• URLSearchParams: Ini digunakan untuk menghuraikan rentetan pertanyaan dan mengekstrak nilai parameter pertanyaan.
• Dalam contoh, pertanyaan parameter pertanyaan diekstrak daripada URL dan nilainya dipaparkan dalam komponen Carian.

Pengambilan Utama untuk Rentetan Pertanyaan:

• useLocation: Untuk mengakses lokasi semasa, termasuk rentetan pertanyaan.
• URLSearchParams: API yang mudah untuk menghuraikan dan mengekstrak parameter pertanyaan.

---

3. Menggabungkan Parameter URL dan Rentetan Pertanyaan

Anda juga boleh menggunakan kedua-dua parameter URL dan rentetan pertanyaan dalam laluan yang sama. Contohnya, anda mungkin mahu menunjukkan profil pengguna berdasarkan nama pengguna dinamik dan menapis data menggunakan parameter pertanyaan.

Contoh dengan Kedua-dua Parameter URL dan Rentetan Pertanyaan:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

const Search = () => {
  // Use the useLocation hook to access the query string
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query'); // Extract query parameter from the URL

  return (
    <div>
      <h2>Search Results</h2>
      {query ? <p>Searching for: {query}</p> : <p>No search query provided</p>}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/search?query=React">Search for React</Link></li>
          <li><Link to="/search?query=JavaScript">Search for JavaScript</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/search" element={<Search />} />
      </Routes>
    </Router>
  );
};

export default App;

Penjelasan:

• Dalam contoh ini, nama pengguna parameter URL dan umur rentetan pertanyaan digunakan bersama dalam /profile/:username?age= URL.
• Nama pengguna diakses menggunakan useParams dan penapis umur diakses menggunakan useLocation dan URLSearchParams.

Pengambilan Utama:

• Menggabungkan Parameter: Anda boleh menggabungkan kedua-dua parameter URL dan rentetan pertanyaan untuk mencipta senario penghalaan yang lebih kompleks.
• Kebimbangan Berasingan: Parameter URL biasanya digunakan untuk pengenalpastian sumber (cth., profil pengguna), manakala rentetan pertanyaan digunakan untuk penapisan atau konfigurasi tambahan (cth., pertanyaan carian, penapis).

---

Kesimpulan

React Router v6 menjadikannya mudah untuk mengendalikan kedua-dua parameter URL dan rentetan pertanyaan dalam logik penghalaan anda. Menggunakan cangkuk useParams, anda boleh mengakses parameter laluan dinamik dengan mudah, manakala useLocation dan URLSearchParams membantu mengurus rentetan pertanyaan. Dengan memahami dan menggunakan alatan ini dengan berkesan, anda boleh mencipta aplikasi React yang dinamik dan fleksibel dengan keupayaan penghalaan yang dipertingkatkan.

---

Atas ialah kandungan terperinci Menguasai Parameter URL dan Rentetan Pertanyaan dalam Penghala Reaksi v6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!