reactの複数ページのアプリを構築する方法は?
Reactのマルチページアプリを構築するには、以下の手順に従って操作できます。
- 新しいReactプロジェクトを作成する:
プロジェクトフォルダーにコマンドラインツールで移動し、次のコマンドを実行して新しいReactプロジェクトを作成します: - npxコマンドを使って、Reactアプリの作成をします。アプリ名は「my-app」とします。
- 現在のディレクトリに「my-app」という名前の新しいプロジェクトが作成されます。
- srcディレクトリ内に複数のページコンポーネントを作成する。
各コンポーネントは1つのページを表します。たとえば、Home.js、About.jsなどのファイルを作成して、それぞれホームページと関連ページを表すことができます。 - React Routerライブラリをインストールして、以下のコマンドを使用してルーターを作成します。
- npm install react-router-dom をインストールします。
- srcディレクトリにAppRouter.jsというファイルを作成し、ページのルートを定義するルーティングコードを追加してください。
- App.jsファイルでAppRouterコンポーネントをインポートして使用します。
- ページコンポーネントの更新:
それぞれのページコンポーネントにおいて、React Routerが提供するルーティングコンポーネントを使用して、ルートパスとコンポーネントのマッピングを定義します。例えば、Home.jsファイルに以下のコードを追加できます。 - import { ルート } from ‘react-router-dom’;
import Home from ‘./Home’;const AppRouter = () => {
return (<ルート パース=”/” コンポーネント={Home} 正確な={true} />
<ルート パース=”/about” コンポーネント={About} />);
} - ナビゲーションを追加してください。ユーザーが異なるページ間を移動できるように、各ページコンポーネントにナビゲーションリンクを追加してください。例えば、Home.jsファイルに以下のコードを追加することができます。
- import { Link } from ‘react-router-dom’;const Home = () => {
return (ホーム
);
} - アプリケーションを起動するには、React開発サーバーを次のコマンドで起動して、アプリケーションの効果を確認してください。
- 実行: npm start
これで、基本的なReactのマルチページアプリケーションを構築することができます。各ページは独立したコンポーネントで表され、ナビゲーションリンクを介して異なるページ間を切り替えることができます。