検索条件をURLに

React実践 / 全 6 枚

URLかstateか

検索語を useState だけに持つと、URL は /items のままで打った言葉が乗りません。

stateだけに持つ

const [keyword, setKeyword] =
  useState("");

// URL は /items のまま

URLに置く

const [searchParams] =
  useSearchParams();
const keyword =
  searchParams.get("q") ?? "";

右は読み込み直しても、貼って送っても同じ絞り込みが再現できます。

1 / 6

← → キーでも送れます