react-router-domでURLに含まれるidを取得したいっ！

2023年1月31日

Routerあんまり触ってなかったんですが、pathで指定した値(/archives/11111みたいなやつ)が取れるんですね😀

<Routes>
  <Route path="/archives/:id" element={<Archive />} />
</Routes>

ってな感じでpathを指定すると、

const Archive = () => {
  const {id} = useParams();
  console.log(id);
};

useParamsで取れる。

参考

useParams v6.8.0 | React Router

関連記事

  1. useReducerでコンポーネントに渡すpropsをすっきりさせたいっ！[React/typescript] 機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。 useState import { useState } from 'react'; […]...
  2. React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps] とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const Hoge: React.FC<{ id: number }> […]...
  3. react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話 ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるM […]...
  4. React.jsでコンソールに”Download the React DevTools for a better development experience”って出るやつ。 Chromeのconsoleに出てるんですが、これ出っ放しなんかな・・？と思ったんですが、、 Download the React DevTools for a better development experience...
React