掌握 React Router v6 中的 URL 參數和查詢字串

React Router v6 中的 URL 參數和查詢字串

URL 參數和查詢字串是 Web 應用程式中 URL 管理的重要面向。它們允許您將動態資料傳遞到不同的路由並根據該資料管理路由。 React Router v6 為處理 URL 參數 和 查詢字串 提供無縫支持，讓您可以建立更動態和靈活的應用程式。

---

1. React Router v6 中的 URL 參數

URL 參數，也稱為 路由參數 或 動態參數，是可用於擷取動態值的 URL 的一部分。這些通常用於識別特定資源或實體。

URL 參數範例：

對於 /profile/:username 這樣的路由，使用者名稱部分是 URL 參數。

第 1 步：使用 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;

說明：

• 路由 /profile/:username 中的 :username 是一個 URL 參數。
• useParams 鉤子在 Profile 元件內部使用來存取 URL 參數（使用者名稱）的值。
• 當使用者導航到 /profile/john 時，值「john」將作為參數傳遞，並將顯示在 Profile 元件中。

URL 參數的關鍵要點：

• 動態路由匹配：URL 參數可讓您匹配動態路由。例如， /profile/:username 可以符合 /profile/john 或 /profile/sarah。
• 存取參數：使用useParams來存取路由中參數的值。

---

2. React Router v6 中的查詢字串

查詢字串是出現在 ? 之後的鍵值對。在網址中。它們通常用於向伺服器傳遞附加資訊或在不更改路由的情況下修改頁面的行為。

查詢字串範例：

對於像 /search?query=React 這樣的 URL，查詢字串是 ?query=React。

第 1 步：使用 useLocation 處理查詢字串

在 React Router v6 中，可以使用 useLocation 鉤子存取查詢字串。 useLocation 提供對目前 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;

說明：

• useLocation：此鉤子提供目前位置對象，其中包括路徑名、搜尋（查詢字串）和雜湊。
• URLSearchParams：用於解析查詢字串並擷取查詢參數的值。
• 範例中，查詢參數query是從URL中提取出來的，其值顯示在搜尋元件中。

查詢字串的關鍵要點：

• useLocation：存取目前位置，包括查詢字串。
• URLSearchParams：用於解析和擷取查詢參數的便利 API。

---

3.結合 URL 參數和查詢字串

您也可以在同一路由中同時使用 URL 參數和查詢字串。例如，您可能希望根據動態使用者名稱顯示使用者個人資料並使用查詢參數過濾資料。

同時包含 URL 參數和查詢字串的範例：

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;

說明：

• 在這個範例中，URL參數username和查詢字串age在/profile/:username?age=中一起使用。網址。
• 使用 useParams 存取使用者名，使用 useLocation 和 URLSearchParams 存取年齡篩選器。

重點：

• 組合參數：您可以組合 URL 參數和查詢字串來建立更複雜的路由場景。
• 單獨的關注點：URL 參數通常用於資源標識（例如，使用者設定檔），而查詢字串用於額外的過濾或配置（例如，搜尋查詢、過濾器）。

---

結論

React Router v6 可以輕鬆處理路由邏輯中的 URL 參數 和 查詢字串。使用 useParams 鉤子，您可以輕鬆存取動態路由參數，而 useLocation 和 URLSearchParams 協助管理查詢字串。透過有效地理解和使用這些工具，您可以建立具有增強路由功能的動態且靈活的 React 應用程式。

---

以上是掌握 React Router v6 中的 URL 參數和查詢字串的詳細內容。更多資訊請關注PHP中文網其他相關文章！