reactの複数ページのアプリを構築する方法は?

Reactのマルチページアプリを構築するには、以下の手順に従って操作できます。

  1. 新しいReactプロジェクトを作成する:
    プロジェクトフォルダーにコマンドラインツールで移動し、次のコマンドを実行して新しいReactプロジェクトを作成します:
  2. npxコマンドを使って、Reactアプリの作成をします。アプリ名は「my-app」とします。
  3. 現在のディレクトリに「my-app」という名前の新しいプロジェクトが作成されます。
  4. srcディレクトリ内に複数のページコンポーネントを作成する。
    各コンポーネントは1つのページを表します。たとえば、Home.js、About.jsなどのファイルを作成して、それぞれホームページと関連ページを表すことができます。
  5. React Routerライブラリをインストールして、以下のコマンドを使用してルーターを作成します。
  6. npm install react-router-dom をインストールします。
  7. srcディレクトリにAppRouter.jsというファイルを作成し、ページのルートを定義するルーティングコードを追加してください。
  8. App.jsファイルでAppRouterコンポーネントをインポートして使用します。
  9. ページコンポーネントの更新:
    それぞれのページコンポーネントにおいて、React Routerが提供するルーティングコンポーネントを使用して、ルートパスとコンポーネントのマッピングを定義します。例えば、Home.jsファイルに以下のコードを追加できます。
  10. import { ルート } from ‘react-router-dom’;
    import Home from ‘./Home’;const AppRouter = () => {
    return (

    <ルート パース=”/” コンポーネント={Home} 正確な={true} />
    <ルート パース=”/about” コンポーネント={About} />

    );
    }

  11. ナビゲーションを追加してください。ユーザーが異なるページ間を移動できるように、各ページコンポーネントにナビゲーションリンクを追加してください。例えば、Home.jsファイルに以下のコードを追加することができます。
  12. import { Link } from ‘react-router-dom’;const Home = () => {
    return (

    ホーム

    );
    }

  13. アプリケーションを起動するには、React開発サーバーを次のコマンドで起動して、アプリケーションの効果を確認してください。
  14. 実行: npm start

これで、基本的なReactのマルチページアプリケーションを構築することができます。各ページは独立したコンポーネントで表され、ナビゲーションリンクを介して異なるページ間を切り替えることができます。

bannerAds