URL値

ルートパラメータ

ルートパラメータは、動的なセグメントから解析された値です。

<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検索パラメータ

検索パラメータは、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は、useLocationでアクセスできるいくつかの便利な情報を含むカスタムlocationオブジェクトを作成します。

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

ルートパラメータ
URL検索パラメータ
Locationオブジェクト