React Routerを使用してURLからデータを取得する方法

React Routerは、Reactアプリケーションでルーティングを管理するための人気のあるライブラリです。URLのパスに基づいて異なるコンポーネントを表示したり、特定のパラメータを使用してデータを取得したりすることができます。

まず、React Routerをインストールします。以下のコマンドを使用して、プロジェクトにReact Routerを追加します。

npm install react-router-dom

React Routerの基本的な使い方は、ルーティングを定義することです。以下は、URLのパスに基づいて異なるコンポーネントを表示する例です。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/products" component={Products} />
      </Switch>
    </Router>
  );
}
function Home() {
  return <h1>ホームページ</h1>;
}
function About() {
  return <h1>このアプリについて</h1>;
}
function Products() {
  return <h1>製品一覧</h1>;
}

上記の例では、ルートパス（/）、/about、および/productsのそれぞれに対して異なるコンポーネントが表示されます。

次に、URLのパラメータからデータを取得する方法を見てみましょう。以下は、URLのパラメータを使用してユーザーのIDを取得する例です。

import { BrowserRouter as Router, Route, Switch, useParams } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
}
function User() {
  let { id } = useParams();
  return <h1>ユーザーID: {id}</h1>;
}

上記の例では、URLのパスにある「/user/:id」の:id部分を取得して表示しています。たとえば、URLが「/user/123」の場合、ユーザーIDとして「123」が表示されます。

これはReact Routerを使用してURLからデータを取得する方法の基本的な例です。必要に応じて、さらに高度なルーティングやデータ取得のロジックを実装することもできます。