React Router完全ガイド

jsx
CopyEdit
import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/home">HomeLink>
      <Link to="/about">AboutLink>
    nav>
  );
}

export default Navigation;

このNavigationコンポーネントを使うことで、/homeや/aboutに遷移するリンクを提供できます。

ルーティングの高度な機能

React Routerには、さらに高度なルーティング機能も備わっています。次に、それらの一部を紹介します。

1. URLパラメータ

React Routerでは、URL内で動的なパラメータを渡すことができます。たとえば、/profile/:usernameのようなURLパスを設定して、ユーザー名をURLから取得することができます。

jsx
CopyEdit
import React from 'react';
import { Route, useParams } from 'react-router-dom';

function Profile() {
  const { username } = useParams();
  return <h1>Welcome, {username}!h1>;
}

function App() {
  return (
    <div>
      <Route path="/profile/:username" component={Profile} />
    div>
  );
}

export default App;

この場合、/profile/johnというURLにアクセスすると、Profileコンポーネントが表示され、johnというユーザー名が表示されます。

2. Switchコンポーネント

Switchコンポーネントは、複数のRouteを使う際に、最初に一致したパスにマッチするルートのみをレンダリングするために使います。これにより、URLに一致する最初のルートのみが表示され、後続のルートは無視されます。

jsx
CopyEdit
import React from 'react';
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      Switch>
    div>
  );
}

export default App;

このようにすることで、/homeや/aboutにマッチする場合のみそのコンポーネントが表示され、それ以外の場合はNotFoundコンポーネントが表示されます。

3. リダイレクト

React Routerでは、特定のURLにアクセスした際に、別のURLにリダイレクトすることも可能です。これにはRedirectコンポーネントを使用します。

jsx
CopyEdit
import React from 'react';
import { Redirect, Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/old-home" render={() => <Redirect to="/home" />} />
    div>
  );
}

export default App;

この例では、/old-homeにアクセスすると、自動的に/homeにリダイレクトされます。

4. useHistoryとuseLocation

useHistoryとuseLocationはReact Routerのフックで、プログラム的にページ遷移を行いたい場合に使います。

• useHistoryは、ブラウザの履歴を操作するために使用します。
• useLocationは、現在のURLやクエリパラメータなどの情報を取得するために使用します。

jsx
CopyEdit
import React from 'react';
import { useHistory } from 'react-router-dom';

function GoHomeButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/home');
  };

  return <button onClick={handleClick}>Go to Homebutton>;
}

export default GoHomeButton;

GoHomeButtonコンポーネントを使うと、ボタンをクリックした際に/homeに遷移することができます。

結論

React Routerは、Reactアプリケーションにおけるルーティングを非常に簡単かつ強力に管理できるライブラリです。基本的な使い方から高度な機能まで幅広くサポートしており、SPA（Single Page Application）の開発において非常に有用です。React Routerを使いこなすことで、より直感的でスムーズなユーザー体験を提供することができます。