React Router v6 で値を渡す方法

React Router v6 で useNavigate を使って値を別のコンポーネントに渡す

React Router v6 では、useNavigate フックを使用して、プログラム的にルート間のナビゲーションを制御することができます。このフックは、特定のルートに遷移するための関数を提供します。この機能を活用して、値を別のコンポーネントに渡すことができます。

基本的な手順:

1. 値を保持するコンポーネント
   

   • useState フックを使用して、渡したい値を状態として管理します。
   • useNavigate フックを使用して、ナビゲーション関数を取得します。

2. ナビゲーショントリガー
   

   • ボタンをクリックしたり、特定のイベントが発生したりしたときに、useNavigate 関数を呼び出して、新しいルートに遷移します。
   • 遷移する際に、search パラメータを使用して、渡したい値をクエリパラメータとして追加します。
3. • useLocation フックを使用して、現在のロケーション情報を取得します。
   • search パラメータからクエリパラメータを取得し、必要な値を抽出します。

例:

import { useState, useNavigate, useLocation } from 'react-router-dom';

function ComponentA() {
  const [value, setValue] = useState('initial value');
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/component-b?value=' + value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={handleNavigate}>Navigate</button>
    </div>
  );
}

function ComponentB() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const value = queryParams.get('value');

  return (
    <div>
      <p>Received value: {value}</p>
    </div>
  );
}

解説:

• ComponentB
  
  • 受け取った value を表示します。
• ComponentA
  
  • value を状態として管理し、入力フィールドで更新できるようにしています。
  • handleNavigate 関数は、navigate を使って /component-b に遷移し、value をクエリパラメータとして追加します。

import { useState, useNavigate, useLocation } from 'react-router-dom';

function ComponentA() {
  const [value, setValue] = useState('initial value');
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/component-b?value=' + value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={handleNavigate}>Navigate</button>
    </div>
  );
}

function ComponentB() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const value = queryParams.get('value');

  return (
    <div>
      <p>Received value: {value}</p>
    </div>
  );
}

React Router v6 で値を渡すための代替方法

React Router v6 では、useNavigate を使って値を渡す方法以外にも、いくつかの代替方法があります。

Context API:

• 値の受け渡し
  値を Context Provider に渡すことで、子コンポーネントでその値にアクセスできます。
• グローバルな状態管理
  Context API を使用して、アプリケーション全体で共有される状態を管理します。

import { createContext, useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';

const ValueContext = createContext();

function ValueProvider({ children }) {
  const [value, setValue] = useState('initial value');
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/component-b');
  };

  return (
    <ValueContext.Provider value={{ value, handleNavigate }}>
      {children}
    </ValueContext.Provider>
  );
}

function ComponentA() {
  const { value, handleNavigate } = useContext(ValueContext);

  return (
    <div>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={handleNavigate}>Navigate</button>
    </div>
  );
}

function ComponentB() {
  const { value } = useContext(ValueContext);

  return (
    <div>
      <p>Received value: {value}</p>
    </div>
  );
}

Redux:

• 値の受け渡し
  Redux のアクションとリデューサーを使用して、値を更新し、コンポーネントでアクセスします。
• 集中型状態管理
  Redux を使用して、アプリケーションの状態を単一の中央ストアに管理します。

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';

const initialState = {
  value: 'initial value',
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_VALUE':
      return { ...state, value: action.payload };
    default:
      return    state;
  }
}

const store = createStore(reducer);

function ComponentA() {
  const value = useSelector((state) => state.value);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/component-b');
  };

  return (
    <div>
      <input type="text" value={value} onChange={(e) => dispatch({ type: 'UPDATE_VALUE', payload: e.target.value })} />
      <button onClick={handleNavigate}>Navigate</button>
    </div>
  );
}

function ComponentB() {
  const value = useSelector((state) => state.value);

  return (
    <div>
      <p>Received value: {value}</p>
    </div>
  );
}

URL パラメータ:

• 値の受け渡し
  useParams フックを使用して、URLパラメータから値を取得します。
• 直接URLに値をエンコード
  値をURLのパラメータとして直接エンコードします。

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

function ComponentA() {
  const navigate = useNavigate();

  const handleNavigate = (value) => {
    navigate('/component-b?value=' + value);
  };

  return (
    <div>
      {/* ... */}
      <button onClick={() => handleNavigate('my value')}>Navigate</button>
    </div>
  );
}

function ComponentB() {
  const { value } = useParams();

  return (
    <div>
      <p>Received value: {value}</p>
    </div>
  );
}