網址參數

路由參數

路由參數是從動態區段解析出來的值。

<Route path="/concerts/:city" element={<City />} />

在這個例子中，:city 是動態區段。該城市的解析值將可從 useParams 取得

import { useParams } from "react-router";

function City() {
  let { city } = useParams();
  let data = useFakeDataLibrary(`/api/v2/cities/${city}`);
  // ...
}

網址查詢參數

搜尋參數是 URL 中 ? 後面的值。它們可以從 useSearchParams 存取，該方法會傳回 URLSearchParams 的實例

function SearchResults() {
  let [searchParams] = useSearchParams();
  return (
    <div>
      <p>
        You searched for <i>{searchParams.get("q")}</i>
      </p>
      <FakeSearchResults />
    </div>
  );
}

Location 物件

React Router 建立了一個自訂的 location 物件，其中包含一些有用的資訊，可以使用 useLocation 存取。

function useAnalytics() {
  let location = useLocation();
  useEffect(() => {
    sendFakeAnalytics(location.pathname);
  }, [location]);
}

function useScrollRestoration() {
  let location = useLocation();
  useEffect(() => {
    fakeRestoreScroll(location.key);
  }, [location]);
}