React Router パラメータ渡し 解説

React Router でコンポーネントにパラメータを渡す

React Router を使用して、URL パラメータをコンポーネントに渡すことができます。これにより、動的なコンテンツやルーティングの柔軟性を向上させることができます。

基本的な手順

1. Route コポーネントで path 属性を使用して、パラメータを受け取るためのパターンを定義します。
2. パラメータをキャッチするための名前付きグループを使用します。
3. match プロパティを使用して、コンポーネントにパラメータを渡します。

例

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/user/:id" component={UserProfile} />
    </Router>
  );
}

function UserProfile({ match }) {
  const userId = match.params.id;
  // userId を使ってユーザー情報を取得し、表示する
  return (
    <div>
      <h1>User Profile: {userId}</h1>
      {/* ユーザー情報を表示 */}
    </div>
  );
}

重要なポイント

• ネストされたルート
  ネストされたルートでもパラメータを渡すことができます。
• match プロパティ
  match プロパティには、現在のルートに関する情報が含まれています。その中の params オブジェクトにパラメータが格納されています。
• パラメータ名
  path 属性のパターンで定義した名前付きグループがパラメータ名になります。

応用例

• ページネーション
  ページ番号をパラメータとして受け取り、ページごとのコンテンツを表示できます。
• 検索機能
  検索クエリをパラメータとして受け取り、検索結果を表示できます。
• 動的なコンテンツ
  ユーザーのIDや記事のIDなどのパラメータを使用して、動的なコンテンツを表示できます。

基本的な例

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/user/:id" component={UserProfile} />
    </Router>
  );
}

function UserProfile({ match }) {
  const userId = match.params.id;
  // userId を使ってユーザー情報を取得し、表示する
  return (
    <div>
      <h1>User Profile: {userId}</h1>
      {/* ユーザー情報を表示 */}
    </div>
  );
}

複数のパラメータを渡す例

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/product/:id/:color" component={ProductDetails} />
    </Router>
  );
}

function ProductDetails({ match }) {
  const productId = match.params.id;
  const productColor = match.params.color;
  // productId と productColor を使って商品情報を取得し、表示する
  return (
    <div>
      <h1>Product Details: {productId}</h1>
      <p>Color: {productColor}</p>
      {/* 商品情報を表示 */}
    </div>
  );
}

ネストされたルートでパラメータを渡す例

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/blog/:category" component={Blog} />
    </Router>
  );
}

function Blog({ match }) {
  const category = match.params.category;
  return (
    <div>
      <h1>Blog Category: {category}</h1>
      <Route path={`${match.path}/:postId`} component={BlogPost} />
    </div>
  );
}

function BlogPost({ match }) {
  const postId = match.params.postId;
  // postId を使ってブログ記事を取得し、表示する
  return (
    <div>
      <h1>Blog Post: {postId}</h1>
      {/* ブログ記事を表示 */}
    </div>
  );
}

useParams Hook を使用

useParams Hook は、現在のルートのパラメータを取得するための簡潔な方法を提供します。

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

function UserProfile() {
  const { id } = useParams();
  // id を使ってユーザー情報を取得し、表示する
  return (
    <div>
      <h1>User Profile: {id}</h1>
      {/* ユーザー情報を表示 */}
    </div>
  );
}

withRouter HOC を使用

withRouter HOC は、コンポーネントに history, location, match プロパティを提供します。これにより、パラメータにアクセスすることができます。

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

function UserProfile(props) {
  const { id } = props.match.params;
  // id を使ってユーザー情報を取得し、表示する
  return (
    <div>
      <h1>User Profile: {id}</h1>
      {/* ユーザー情報を表示 */}
    </div>
  );
}

export default withRouter(UserProfile);

Link コンポーネントの to 属性を使用

Link コンポーネントの to 属性にパラメータを指定することで、リンクをクリックしたときにパラメータが渡されます。

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

function UserList() {
  return (
    <ul>
      <li><Link to="/user/1">User 1</Link></li>
      <li><Link to="/user/2">User 2</Link></li>
    </ul>
  );
}

プログラム的にルートを変更する

useNavigate Hook を使用して、プログラム的にルートを変更し、パラメータを渡すことができます。

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    const query = event.target.elements.query.value;
    navigate(`/search?query=${query}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="query" />
      <button type="submit">Search</button>
    </form>
  );
}