著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

React では、 routers は、Webアプリケーションを構成するさまざまなURLの作成とナビゲートに役立ちます。 これにより、ユーザーはアプリのコンポーネント間を移動しながら、ユーザー状態を維持できます。また、これらのコンポーネントに一意のURLを提供して、共有しやすくすることができます。 ルーターを使用すると、サイトナビゲーションを簡素化することで、アプリのユーザーエクスペリエンスを向上させることができます。

Reactルーターは、Reactで最も人気のあるルーティングフレームワークの1つです。 ライブラリは直感的なコンポーネントで設計されており、アプリケーションの宣言型ルーティングシステムを構築できます。 これは、どのコンポーネントに特定のルートがあるかを正確に宣言できることを意味します。 宣言型ルーティングを使用すると、人間が読める形式の直感的なルートを作成できるため、アプリケーションアーキテクチャの管理が容易になります。

このチュートリアルでは、Reactルーターをインストールして構成し、一連のルートを構築し、<Link>コンポーネントを使用してそれらに接続します。 また、コンポーネントでアクセスできるURLからデータを収集する動的ルートを構築します。 最後に、フックを使用して、データやその他のルーティング情報にアクセスし、親ルートによってレンダリングされるコンポーネント内に存在するネストされたルートを作成します。

このチュートリアルを終了すると、Reactプロジェクトにルートを追加し、ルートから情報を読み取って、URLデータに応答する柔軟なコンポーネントを作成できるようになります。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.22.0およびnpmバージョン6.14.6でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04