# React Routerでパラメータ名が一致しない時のハマりポイントと解決法
## はじめに
React + React Router v6で動的ルーティング（例: 商品詳細ページ）を実装する際、
URLパラメータ名（`productId` か `product_id` か）がルーティング設定や`useParams`で一致していないと、
値が取得できない・バグが発生することがあります。
---
## よくある例
### 1. ルート定義とパラメータ名の不一致
```tsx
// App.tsx または routes.ts
<Route path="/products/:productId" element={<ProductDetailsPage />} />
この場合、パラメータ名はproductId。
2. useParams側
const { product_id } = useParams<{ product_id: string }>()
// これだと undefined になる！
エラー例:
ルートはproductIdなのに、useParamsはproduct_idで取り出そうとしているため、値がundefinedになる。
解決方法
- ルートのパラメータ名とuseParamsで取得する変数名を一致させること！
正しい例
// ルート定義
<Route path="/products/:productId" element={<ProductDetailsPage />} />
// 取得側
const { productId } = useParams<{ productId: string }>()
データの命名規則に注意
バックエンドやDBはproduct_id（スネークケース）で設計されていることが多いですが、
ReactやTypeScriptではキャメルケース（productId）を使うことが一般的です。
フロント側のルーティングやstate管理はキャメルケースに統一するのがおすすめ。
まとめ
- React RouterのURLパラメータ名とuseParamsの変数名は完全一致で取得する
- APIレスポンスやDB項目の命名規則と、ルート・useParamsの命名は分けて考える
- どちらか分からなくなったら、
console.log(useParams())で中身を確認！
少しでも同じハマりを減らすための参考になれば幸いです！