已解決：從 url react router dom v6 獲取查詢

從 URL React Router DOM v6 獲取查詢的主要問題是它沒有提供訪問查詢參數的內置方式。 相反，開發人員必須自己手動解析 URL 字符串並提取查詢參數。 這可能是一個乏味的過程，如果操作不當可能會導致錯誤。 此外，如果 URL 結構發生變化，則可能需要相應地更新代碼。

import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. “從‘react-router-dom’導入{useLocation}；” – 此行從 react-router-dom 庫中導入 useLocation 掛鉤。
2. “const MyComponent = () => {”——這一行聲明了一個名為 MyComponent 的函數，它將返回一個 React 組件。
3. “const location = useLocation();” – 此行使用導入的 useLocation 掛鉤獲取有關應用程序當前位置的信息（例如，URL）。
4. “const queryParams = new URLSearchParams(location.search);” – 該行創建一個包含當前 URL 中所有查詢參數的對象（例如，?myParam=foo）。
5. 其餘代碼只是返回一個帶有 h1 和 p 標籤的 React 組件，該標籤在 URL 查詢字符串中顯示 myParam 的值（如果存在）。

反應路由器 Dom

React Router DOM 是 React 的路由庫，允許開發人員在其 React 應用程序中創建和管理路由。 它提供了一個用於導航應用程序的 API，允許開發人員以聲明方式定義路由、根據當前 URL 呈現組件以及應用程序不同部分之間的鏈接。 它還支持動態路線匹配、位置跟踪和導航守衛等功能。

如何在 React v6 路由器中獲取查詢字符串

v6

在 React Router v6 中，您可以使用 useLocation 掛鉤訪問查詢字符串參數。 此掛鉤返回一個位置對象，該對象包含有關當前 URL 的信息，包括路徑名、搜索、哈希和狀態屬性。 搜索屬性包含查詢字符串參數作為字符串。 然後您可以解析此字符串以獲取包含所有查詢字符串參數的對象。
例如：
const {搜索} = useLocation();
const params = new URLSearchParams(搜索);
const param1 = params.get('param1');

相關文章：

發表評論