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

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

手順

1. useNavigateフックをインポートする:

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

1. useNavigateを使用して遷移先のパスを指定する:

const navigate = useNavigate();

navigate("/target-component");

1. オプションで state プロパティを使用して値を渡す:

navigate("/target-component", { state: { data: "This is some data" } });

1. useLocationフックを使用して渡された値を取得する:

import { useLocation } from "react-router-dom";

const location = useLocation();
const data = location.state.data;

例

以下の例は、useNavigateを使用して別のコンポーネント (TargetComponent) に値を渡す方法を示しています。

遷移元のコンポーネント (SourceComponent)

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

const navigate = useNavigate();

const handleClick = () => {
  navigate("/target-component", { state: { data: "This is some data" } });
};

return (
  <button onClick={handleClick}>Target Component に移動</button>
);

import { useLocation } from "react-router-dom";

const location = useLocation();
const data = location.state.data;

return (
  <div>
    <h1>Target Component</h1>
    <p>渡された値: {data}</p>
  </div>
);

• useNavigate は、コンポーネント内の任意の場所から呼び出すことができます。
• state プロパティには、任意のデータを渡すことができます。
• useLocation は、TargetComponent コンポーネント内でのみ使用できます。
• React Router v6 では、useHistory フックは廃止されています。代わりに、useNavigate フックを使用する必要があります。

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

const SourceComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/target-component', { state: { data: 'This is some data' } });
  };

  return (
    <button onClick={handleClick}>Target Component に移動</button>
  );
};

export default SourceComponent;

import React from 'react';
import { useLocation } from 'react-router-dom';

const TargetComponent = () => {
  const location = useLocation();
  const data = location.state.data;

  return (
    <div>
      <h1>Target Component</h1>
      <p>渡された値: {data}</p>
    </div>
  );
};

export default TargetComponent;

このコードの説明:

• SourceComponent:
  • useNavigate フックを使用して navigate 関数を取得します。
  • handleClick 関数は、navigate 関数を使用して /target-component パスに遷移します。
  • state プロパティを使用して、data というキーで "This is some data" という値を渡します。
  • ボタンをクリックすると、handleClick 関数が呼び出され、TargetComponent に遷移します。
• TargetComponent:
  • useLocation フックを使用して location オブジェクトを取得します。
  • location.state.data プロパティを使用して、渡された値を取得します。
  • 渡された値を p タグ内に表示します。

• useContext フックを使用して、コンポーネント間でデータを共有することもできます。
• React Router v6 には、useParams や useRouteMeta などの他のフックも用意されています。これらのフックを使用して、URL パラメータやルート メタデータにアクセスすることができます。

URL パラメータ

URL パラメータを使用して、コンポーネント間でデータを共有することができます。これは、シンプルなデータを渡す場合に適しています。

例:

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

const SourceComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/target-component/data1/data2');
  };

  return (
    <button onClick={handleClick}>Target Component に移動</button>
  );
};

export default SourceComponent;

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

const TargetComponent = () => {
  const { data1, data2 } = useParams();

  return (
    <div>
      <h1>Target Component</h1>
      <p>URL パラメータ: data1 = {data1}, data2 = {data2}</p>
    </div>
  );
};

export default TargetComponent;

• SourceComponent:
  • navigate 関数を使用して /target-component/:data1/:data2 パスに遷移します。
  • : 記号を使用して、URL パラメータを定義します。
• TargetComponent:
  • useParams フックを使用して、URL パラメータを取得します。
  • data1 と data2 というキーを使用して、パラメータの値にアクセスします。

Context API

Context API は、コンポーネント間でデータを共有するためのより高度な方法です。これは、グローバルな状態を管理する場合や、コンポーネントの階層全体でデータを共有する必要がある場合に適しています。

Context の作成:

import React from 'react';

const MyContext = React.createContext({ data: null });

export default MyContext;

import React from 'react';
import { MyContext } from './MyContext';

const SourceComponent = () => {
  return (
    <MyContext.Provider value={{ data: 'This is some data' }}>
      <TargetComponent />
    </MyContext.Provider>
  );
};

export default SourceComponent;

import React from 'react';
import { MyContext } from './MyContext';

const TargetComponent = () => {
  const context = useContext(MyContext);
  const data = context.data;

  return (
    <div>
      <h1>Target Component</h1>
      <p>Context からのデータ: {data}</p>
    </div>
  );
};

export default TargetComponent;

• Context の作成:
  • React.createContext 関数を使用して、Context を作成します。
  • Context には、デフォルト値として null を設定します。
• SourceComponent:
  • MyContext.Provider コンポーネントを使用して、Context の値を data: 'This is some data' に設定します。
  • TargetComponent コンポーネントを Provider コンポーネント内にレンダリングします。
• TargetComponent:
  • useContext フックを使用して、Context から値を取得します。
  • Context から取得した data を p タグ内に表示します。

Redux

Redux は、アプリケーションの状態を管理するためのステートマネジメントライブラリです。これは、複雑なアプリケーションでデータを共有する場合に適しています。

Redux ストアの設定:

import { createStore } from 'redux';

const initialState = { data: 'This is some data' };

const reducer = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const store = createStore(reducer);

import