React Router（使い方紹介）

React Router は、React アプリケーションでルーティングを処理するためのライブラリです。これにより、アプリケーション内で複数のページを定義し、URL が変更されたときに異なるコンテンツを表示できます。

React Router を使用するには、まずそれをインストールする必要があります。

npm install react-router-dom

次に、必要なコンポーネントと関数をアプリに導入します。

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch,
  useHistory,
  useLocation,
  Redirect,
  Prompt
} from 'react-router-dom';

次に、ルートを定義できます。簡単な例を次に示します。

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users/:id">
            <User />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function User() {
  let { id } = useParams();
  return <h2>User: {id}</h2>;
}

この例では:

アプリケーション全体をラップするRouter コンポーネントを作成します。
ナビゲーションバーでは、Link コンポーネントを使用して、別のページにリンクするボタンを作成します。
Switch コンポーネントを使用して、現在の URL に一致する最初の子 Route コンポーネントをレンダリングします。
各Route コンポーネントに対して、パスと、そのパスのコンテンツをレンダリングするコンポーネントを指定します。
/users/:id パスにアクセスする場合、useParams フックを使用して URL からパラメータ値を取得できます。

これは React Router の基本的な使用方法にすぎません。実際には、ネストされたルーティング、動的ルートマッチングなど、他の多くの機能が提供されます。

ネストされたルーティング

Route コンポーネントの children 属性を使用して、ネストされたルートを作成できます。例:

function Users() {
  return (
    <div>
      <h1>Users</h1>
      <Switch>
        <Route exact path="/users">
          <AllUsers />
        </Route>
        <Route path="/users/:id">
          <SingleUser />
        </Route>
      </Switch>
    </div>
  );
}

ここで、/users にアクセスすると、すべてのユーザーのリストが表示されます。/users/:id にアクセスすると、1 人のユーザーの情報が表示されます。表示されます。

動的ルートマッチング

React Router を使用すると、ルーティングパスで動的パラメータを使用できます。これらのパラメータはコロン (:) で始まり、任意の文字列を受け入れることを示します。例:

<Route path="/users/:id" component={UserProfile} />

この例では、:id は動的パラメータです。 /users/42 または /users/bob にアクセスすると、それらが照合されて UserProfile コンポーネントに渡されます。

ルーティングフック

React Router は、コンポーネント内でルーティング関連の操作を処理するのに役立つ一連の便利なフックを提供します。例えば：

useParams(): URLからパラメータ値を抽出します。
useRouteMatch()

ネストされたルーティング

動的ルートマッチング

ルーティングフック

おすすめ