ReactJS - ルーティング：Reactアプリケーションをナビゲートするための入門ガイド

こんにちは、未来のReact開発者たち！今日、私たちはReactのルーティングの世界に興味深い旅をします。あなたの近所の親切なコンピュータサイエンスの先生として、私はこの重要な概念をガイドするためにここにいます。これで、Reactアプリケーションが次のレベルに進むことができます。さあ、シートベルトを締めて、潜りましょう！

ReactJS - Routing

Reactでのルーティングとは？

始める前に、あなたが家を建てていると想像してください。あなたの家のそれぞれの部屋は、Webアプリケーションの異なるページのようです。では、部屋間を移動する際に、家を全部再建する必要がなくなる cosa は素晴らしいと思いませんか？それがまさにReactでのルーティングです！

ルーティングは、シングルページアプリケーションを複数のビューで構成し、ユーザーがアプリケーション全体を再読み込みすることなく異なるコンポーネント（または「ページ」）間をナビゲートできるようにします。まるで魔法のドアがあって、家のどの部屋にも即座に移動できるようなものです！

React Routerのインストール

Reactでのルーティングを始めるためには、React Routerという人気のライブラリをインストールする必要があります。心配しないでください。簡単です！

ターミナルを開き、Reactプロジェクトのディレクトリに移動し、以下のコマンドを実行します：

npm install react-router-dom

このコマンドは、npm（Node Package Manager）にReact Routerパッケージをインストールするように指示します。インストールが完了すると、ルーティングを始める準備が整います！

React Router：基本編

React Routerをインストールしたので、使い方を学びましょう。まずは簡単な例から始めて、知識を少しずつ深めます。

ステップ1：必要なコンポーネントをインポート

まず、React Routerから必要なコンポーネントをインポートします。mainのApp.jsファイルの上部に以下の行を追加します：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

ステップ2：ルーターを設定

次に、アプリケーション全体をRouterコンポーネントでラップします。これにより、Reactにアプリケーションでルーティングを有効にしたいと指示します：

function App() {
return (
<Router>
{/* アプリケーションのコンテンツはここに */}
</Router>
);
}

ステップ3：ルートを定義

さあ、ルートを定義しましょう。以下の3つのシンプルなコンポーネントを作成します：Home、About、Contact。

function Home() {
return <h2>ようこそ私たちのホームページへ！</h2>;
}

function About() {
return <h2>このAboutページで私たちについて更多信息を学びましょう。</h2>;
}

function Contact() {
return <h2>このContactページで私たちと連絡を取りましょう。</h2>;
}

これらのコンポーネントに対するルートを設定するために、Routeコンポーネントを使用します：

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

以下が起こっていることです：

exactキーワードは、パスが正確に"/"である場合にのみHomeコンポーネントがレンダリングされることを保証します。
各Routeコンポーネントは、pathプロパティ（URL）とcomponentプロパティ（そのパスにレンダリングされるコンポーネント）を受け取ります。

ステップ4：ナビゲーションを追加

ユーザーがこれらのルート間をナビゲートできるように、Linkコンポーネントを使用します：

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

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Linkコンポーネントは、超強化された<a>タグのようなものです。フルページのリロードなしでナビゲーションを可能にします。

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

基本的なことを理解したので、ネストされたルーティングにレベルアップしましょう。例えば、「Products」ページがあり、その中で異なるカテゴリーの製品を表示したいとします。

ネストされたルーティングを設定する方法は以下の通りです：

function Products() {
return (
<div>
<h2>私たちの製品</h2>
<ul>
<li>
<Link to="/products/electronics">電子機器</Link>
</li>
<li>
<Link to="/products/books">書籍</Link>
</li>
</ul>

<Route path="/products/electronics" component={Electronics} />
<Route path="/products/books" component={Books} />
</div>
);
}

function Electronics() {
return <h3>私たちの最新のガジェットをチェックアウトしてください！</h3>;
}

function Books() {
return <h3>私たちの豊富な書籍コレクションを探索してください！</h3>;
}

この例では、Productsコンポーネントが自身のルートを持っています。/products/electronicsにナビゲートすると、ProductsコンポーネントとElectronicsコンポーネントの両方を見ることができます。

React Routerの利点

React Routerは、Reactアプリケーションでのルーティングを処理するための人気の選択肢です。以下にその利点をいくつか紹介します：

利点	説明
动的ルーティング	ルートはアプリケーションの構成の一部として定義され、設定ファイルには含まれません。
ネストされたルート	複雑なUIを簡単に作成できるネストされたルーティング構造を提供します。
ヒストリーコントロール	ブラウザの履歴スタックに対する細かいコントロールを提供します。
コードスプリッティング	アプリケーションのパフォーマンスを向上させるために簡単にコードをスプリットできます。
声明型ルーティング	ルートをReactコンポーネントとして定義することで、より直感的で簡単に管理できます。

結論

おめでとうございます！あなたはReactルーティングの世界への最初の一歩を踏み出しました。私たちはインストール、基本的なルーティング、ネストされたルーティング、そしてReact Routerの利点について説明しました。覚えておいてください、どんなスキルも練習で簡単になります。ですから、実験を恐れず、自分自身のルーティング付きアプリケーションを構築してみてください。

このチュートリアルを終える際に、ある生徒の言葉を思い出します。「Reactルーティングは、目を閉じて迷路を歩くようなものだと思っていました。」しかし、練習の後、同じ生徒が言いました。「今は地図と懐中電灯を持っているようなものです！」このチュートリアルがあなたのReactルーティングの旅のための地図と懐中電灯となれば幸いです。

codingを続け、学び続け、そして最も重要なのは、素晴らしいReactアプリケーションを構築する楽しさを享受してください！

Credits: Image by storyset