React Router データ渡し解説

React Router でプログラム的にナビゲートする際のデータ渡しについて

React Router を使用してプログラム的にナビゲートする際に、データを渡す方法はいくつかあります。以下はその方法とコード例です。

URL Query Parameters

最も簡単な方法は、URLにクエリパラメータとしてデータを追加することです。

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

const navigate = useNavigate();

const handleClick = (userId) => {
  navigate('/user', { search: `?userId=${userId}` });
};

URLのパスにデータを埋め込むこともできます。

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

const navigate = useNavigate();

const handleClick = (userId) => {
  navigate(`/user/${userId}`);
};

Context API

ReactのContext APIを使用して、データを親コンポーネントから子コンポーネントに渡すことができます。

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

const UserContext = createContext();

const MyComponent = () => {
  const navigate = useNavigate();
  const userId = 123;

  return (
    <UserContext.Provider value={userId}>
      <button onClick={() => navigate('/user')}>Navigate</button>
    </UserContext.Provider>
  );
};

const UserDetail = () => {
  const userId = useContext(UserContext);
  // Use userId here
};

Redux Store

Reduxを使用している場合は、Reduxストアにデータを保存し、他のコンポーネントからアクセスすることができます。

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

const navigate = useNavigate();

const handleClick = () => {
  dispatch(setUserData({ userId: 123 }));
  navigate('/user');
};

const UserDetail = () => {
  const userId = useSelector(state => state.user.userId);
  // Use userId here
};

選ぶべき方法 どの方法を選ぶかは、データの性質やアプリのアーキテクチャによって異なります。

• Redux Store は、アプリケーション全体でデータを管理したい場合に最適です。
• Context API は、コンポーネントツリー内の特定の範囲でデータを共有したい場合に適しています。
• URL Path Parameters は、URLの一部としてデータを組み込む必要がある場合に便利です。
• URL Query Parameters は、単純なデータを渡すのに適しています。

URLにクエリパラメータとしてデータを追加します。

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

const navigate = useNavigate();

const handleClick = (userId) => {
  navigate('/user', { search: `?userId=${userId}` });
};

• navigate('/user', { search:?userId=${userId}}): /user パスに移動し、クエリパラメータ userId に userId の値を設定します。

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

const navigate = useNavigate();

const handleClick = (userId) => {
  navigate(`/user/${userId}`);
};

• navigate(/user/${userId}): /user/${userId} パスに移動し、パスに userId の値を埋め込みます。

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

const UserContext = createContext();

const MyComponent = () => {
  const navigate = useNavigate();
  const userId = 123;

  return (
    <UserContext.Provider value={userId}>
      <button onClick={() => navigate('/user')}>Navigate</button>
    </UserContext.Provider>
  );
};

const UserDetail = () => {
  const userId = useContext(UserContext);
  // Use userId here
};

• useContext(UserContext): UserDetail コンポーネントで userId を取得します。
• UserContext.Provider: userId をコンポーネントツリーに提供します。

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

const navigate = useNavigate();

const handleClick = () => {
  dispatch(setUserData({ userId: 123 }));
  navigate('/user');
};

const UserDetail = () => {
  const userId = useSelector(state => state.user.userId);
  // Use userId here
};

• useSelector(state => state.user.userId): Reduxストアから userId を取得します。
• dispatch(setUserData({ userId: 123 })): Reduxストアに userId を保存します。

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

const navigate = useNavigate();

const handleClick = (userId) => {
  navigate('/user', { search: `?userId=${userId}` });
};

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

const navigate = useNavigate();

const handleClick = (userId) => {
  navigate(`/user/${userId}`);
};

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

const UserContext = createContext();

const MyComponent = () => {
  const navigate = useNavigate();
  const userId = 123;

  return (
    <UserContext.Provider value={userId}>
      <button onClick={() => navigate('/user')}>Navigate</button>
    </UserContext.Provider>
  );
};

const UserDetail = () => {
  const userId = useContext(UserContext);
  // Use userId here
};

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

const navigate = useNavigate();

const handleClick = () => {
  dispatch(setUserData({ userId: 123 }));
  navigate('/user');
};

const UserDetail = () => {
  const userId = useSelector(state => state.user.userId);
  // Use userId here
};

Custom Hooks

カスタムフックを使用して、データの管理と渡しをカプセル化することができます。

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

const useUser = () => {
  const [userId, setUserId] = useState(null);
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/user', { state: { userId } });
  };

  return { userId, setUserId, handleNavigate };
};

const MyComponent = () => {
  const { userId, setUserId, handleNavigate } = useUser();

  // ...
};

URLSearchParams

URLのクエリパラメータをより柔軟に操作するために、URLSearchParams オブジェクトを使用することができます。

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

const navigate = useNavigate();

const handleClick = (userId) => {
  const searchParams = new URLSearchParams();
  searchParams.set('userId', userId);
  navigate('/user', { search: searchParams.toString() });
};

• URLSearchParams は、URLのクエリパラメータをより柔軟に操作したい場合に便利です。
• Custom Hooks は、データの管理と渡しをカプセル化したい場合に便利です。