react-router-dom v6 獲取鏈接上?參數

在 React Router v6 中，可以使用 useSearchParams hook 來獲取鏈接上的 ? 參數。

首先，在組件中導入 useSearchParams：

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

然后，調用 useSearchParams() 方法，它會返回一個數組，包含兩個元素：一個包含參數的對象和一個用于更新參數的函數。

const [params, setParams] = useSearchParams();

現在，你可以像操作普通對象一樣訪問參數，例如：

const id = params.get("id");

如果你想獲取多個參數，可以使用解構語法：

const { id, name } = params;

如果需要更新參數，可以使用 setParams 方法。例如，要將 id 參數設置為 123：

setParams({ id: "123" });

這將導致 URL 中的查詢字符串變為 ?id=123。

注意：使用 useSearchParams 需要確保你的路由使用了 SearchParamsProvider，例如：

import { BrowserRouter, Routes, Route, useParams, SearchParamsProvider } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <SearchParamsProvider>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/example" element={<Example />} />
        </Routes>
      </SearchParamsProvider>
    </BrowserRouter>
  );
}