React Routerでハンドラーコンポーネントにpropsを渡す3つの方法

2024-04-02

React Routerでハンドラーコンポーネントにpropsを渡す方法

方法

propsを渡す方法はいくつかありますが、ここでは代表的な2つの方法を紹介します。

renderプロパティを使う

Routeコンポーネントのrenderプロパティに、関数を受け渡すことができます。この関数内で、propsを渡したいコンポーネントをレンダリングし、propsを渡します。

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

const App = () => {
  const data = {
    name: 'John Doe',
    age: 30,
  };

  return (
    <div>
      <Route
        path="/"
        render={() => <Home data={data} />}
      />
    </div>
  );
};

const Home = ({ data }) => {
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

この例では、Homeコンポーネントにdataというpropsを渡しています。Homeコンポーネントでは、data.nameとdata.ageを使用して、ユーザーの名前と年齢を表示しています。

componentプロパティとwithRouterを使う

Routeコンポーネントのcomponentプロパティに、コンポーネントを受け渡すことができます。このとき、withRouterという高階関数を使って、コンポーネントにlocationとmatchというpropsを渡すことができます。

import { Route, withRouter } from 'react-router-dom';

const App = () => {
  return (
    <div>
      <Route
        path="/"
        component={withRouter(Home)}
      />
    </div>
  );
};

const Home = ({ location, match }) => {
  return (
    <div>
      <h1>{location.pathname}</h1>
      <p>{match.params.id}</p>
    </div>
  );
};

この例では、Homeコンポーネントにlocationとmatchというpropsを渡しています。locationプロパティには、現在のURL情報が含まれています。matchプロパティには、現在のURLにマッチしたルートのパラメータが含まれています。

renderプロパティとcomponentプロパティのどちらを使うかは、状況によって使い分けます。

renderプロパティは、より柔軟にpropsを渡したい場合に便利です。
componentプロパティとwithRouterは、locationとmatchというpropsを簡単に利用したい場合に便利です。

renderプロパティを使う

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

const App = () => {
  const data = {
    name: 'John Doe',
    age: 30,
  };

  return (
    <div>
      <Route
        path="/"
        render={() => <Home data={data} />}
      />
    </div>
  );
};

const Home = ({ data }) => {
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

componentプロパティとwithRouterを使う

import { Route, withRouter } from 'react-router-dom';

const App = () => {
  return (
    <div>
      <Route
        path="/"
        component={withRouter(Home)}
      />
    </div>
  );
};

const Home = ({ location, match }) => {
  return (
    <div>
      <h1>{location.pathname}</h1>
      <p>{match.params.id}</p>
    </div>
  );
};

その他

上記のコード以外にも、useParams Hookを使ってpropsを取得する方法もあります。

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

const Home = () => {
  const { id } = useParams();

  return (
    <div>
      <h1>{id}</h1>
    </div>
  );
};

このコードでは、useParams Hookを使って、idというパラメータを取得しています。

まとめ

renderプロパティ、componentプロパティ、useParams Hookなど、状況に合わせてさまざまな方法でpropsを渡すことができます。

React Routerでハンドラーコンポーネントにpropsを渡す方法

上記以外の方法

Routeコンポーネントには、propsプロパティというプロパティがあり、ここにオブジェクトを渡すことで、ハンドラーコンポーネントにpropsを渡すことができます。

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

const App = () => {
  const data = {
    name: 'John Doe',
    age: 30,
  };

  return (
    <div>
      <Route
        path="/"
        render={() => <Home {...data} />}
      />
    </div>
  );
};

const Home = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
};

useRoute Hookを使う

React Router v6では、useRoute Hookを使って、現在のルート情報を含むオブジェクトを取得することができます。このオブジェクトには、location、match、paramsなどのプロパティが含まれており、これらのプロパティを使ってpropsを作成することができます。

import { Route, useRoute } from 'react-router-dom';

const App = () => {
  return (
    <div>
      <Route path="/" component={Home} />
    </div>
  );
};

const Home = () => {
  const { location, match, params } = useRoute();

  const data = {
    pathname: location.pathname,
    path: match.path,
    id: params.id,
  };

  return (
    <div>
      <h1>{data.pathname}</h1>
      <p>{data.path}</p>
      <p>{data.id}</p>
    </div>
  );
};