useNavigate を使ったURLパラメータに値を設定して React Router での遷移方法

React Router v6 から、useNavigate という新しいフックが導入されました。

これを使って、プログラム的にルーティングの遷移を行うことができます。

以下は useNavigate を使って、URL パラメータを持つパスに遷移する基本的な方法です。

import { useNavigate } from 'react-router-dom';

const URL_PATH = '/path/:id';
const navigate = useNavigate();

onClick={() => navigate(URL_PATH.replace(':id', '3'))}

上記のコードは URL_PATH の :id 部分を「3」に置き換え、/path/3 というパスへの遷移をトリガーします。

replace メソッドを使用することで、URL_PATH の定義を変更せずに動的なパスの生成が可能です。

これにより、一元的なルート定義を保持しながら、異なるIDやパラメータでの遷移を簡単に実装することができます。