ReactJS - BrowserRouter: 初心者向けルーティングガイド

こんにちは、React開発者を目指している皆さん！今日は、Reactアプリケーションにおけるルーティングの世界に楽しい旅に出発します。プログラミングが初めてであっても心配しないでください。私はあなたのフレンドリーなガイドとして、すべてをステップバイステップで説明します。コーヒーを飲みながら、一緒に深めましょう！

ReactJS - BrowserRouter

ルーティングの概念

ルーティングとは？

大きな図書館にいると想像してください。特定の本を見つけたいけれど、どこにあるか分かりません。その時、図書館のカタログが役立ちます。カタログはどの棚を見るべきかを教えてくれます。Webアプリケーションにおけるルーティングも同様です。URLに基づいてどのコンポーネントを表示するかをアプリケーションに教える地図のようなものです。

ルーティングが必要な理由

例えば、個人サイトを構築していて、Home、About、Contactなどの異なるページを持っているとします。ルーティングなしでは、ユーザーの操作に基づいて手動でコンポーネントを表示したり非表示にしたりする必要があります。これは面倒で間違えやすいです。ルーティングはこのプロセスを自動化し、アプリケーションをより組織的でユーザーフレンドリーにします。

BrowserRouterの導入

Reactの世界には、BrowserRouterという素晴らしいツールがあります。これはreact-router-domライブラリの一部で、Reactアプリケーションにルーティングを実装する手助けをしてくれます。あなたのアプリの個人的な司書のように、常にユーザーを正しい「本」(または、私たちの場合はコンポーネント)に導く準備ができています。

ルーターの適用方法

概念を理解したので、コードを書いてみましょう！

ステップ1: インストール

まず第一に、react-router-domパッケージをインストールする必要があります。ターミナルを開いて以下のコマンドを実行します：

npm install react-router-dom

ステップ2: BrowserRouterの設定

まず、メインのAppコンポーネントをBrowserRouterでラップします。以下のようにします：

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

この例では、BrowserRouterをインポートし、Routerにリネームしています。その後、AppコンポーネントをRouterでラップします。これにより、アプリ全体にルーティングコンテキストが設定されます。

ステップ3: ルートの定義

次に、Appコンポーネントにルートを定義します：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

以下のように分解します：

RouteとSwitchをreact-router-domからインポートします。
Switchは一度に一つのルートのみをレンダリングするようにします。
各RouteコンポーネントはURLパスとReactコンポーネントのマッピングを定義します。
Homeルートにはexactプロパティを設定し、正確なパス"/"にのみ一致するようにします。

ステップ4: ナビゲーションの作成

次に、アプリにナビゲーションを追加します：

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

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);

export default Navigation;

ここでは、Linkコンポーネントを使用しています。これは<a>タグの代わりで、ナビゲーションを行う際にページの再読み込みを防ぎます。

ステップ5: 全てを組み合わせる

Appコンポーネントにナビゲーションを追加します：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

これで、基本的なReactアプリケーションにルーティングが設定されました。

高度なルーティング技術

基本的なことをカバーしたので、さらに高度な技術を見てみましょう。

1. URLパラメータ

時々、URLを通じてデータを渡したいすることがあります。例えば、ユーザープロフィールページ：

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

UserProfileコンポーネントでは、以下のようにidパラメータにアクセスできます：

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

const UserProfile = () => {
let { id } = useParams();
return <h1>User Profile for user {id}</h1>;
};

2. ネストされたルート

コンポーネント内にルートをネストすることができます。これは複雑なレイアウトに便利です：

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>Users</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. プログラマティックなナビゲーション

フォームの送信後など、プログラマティックにナビゲーションを行いたい場合があります：

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

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... フォームのログインロジック
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* フォームフィールド */}
</form>
);
};

ルーティングメソッドの表

以下に、今まで話した主なルーティングメソッドをまとめた表です：

メソッド	目的	例
`<BrowserRouter>`	アプリをラップしてルーティングを有効にする	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	ルートを定義する	`<Route path="/about" component={About} />`
`<Switch>`	一度に一つのルートのみをレンダリングする	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	ルートへのリンクを作成する	`<Link to="/about">About</Link>`
`useParams()`	URLパラメータにアクセスする	`let { id } = useParams();`
`useHistory()`	プログラマティックなナビゲーション	`history.push('/dashboard');`

そして、皆さん！ReactにおけるBrowserRouterを使用したルーティングの基本を旅しました。実践を重ねることで完璧になりますので、自分のプロジェクトでこれらの概念を試してみてください。

ハッピーコーディング、そしてあなたのルートがいつも正しいコンポーネントに導いてくれることを祈っています！

Credits: Image by storyset