reactでルーティングパラメータを取得する方法は？

2年 ago
結衣, 春花
1 minute

Reactでは、react-routerライブラリを使用してルーティングパラメーターを取得することができます。以下はreact-routerを使用してルーティングパラメーターを取得する手順です。

  1. リアクト・ルーター・ドム
npm install react-router-dom
  1. ブラウザルーター
  2. ルート
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Home from './Home';
import Product from './Product';

const App = () => {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/product/:id" component={Product} />
    </Router>
  );
}

export default App;
  1. 持ち物
  2. マッチのパラメータ
  3. 商品
  4. 私のアイデンティティ
import React from 'react';

const Product = (props) => {
  const { id } = props.match.params;

  return <h1>Product ID: {id}</h1>;
}

export default Product;

上記の例では、/product/123にアクセスすると、Productコンポーネントがレンダリングされ、idパラメータの値が123になります。

bannerAds