React でマルチページ アプリケーションを構築する: ルーターのチュートリアル

React でマルチページ アプリケーションを作成するのは、React Router を使用すると簡単です。 React Router は、React アプリにルーティングを実装できる強力なライブラリです。この記事では、React Router を使用してマルチページ アプリケーションをセットアップする手順を説明し、開始するための基本概念とコード例を取り上げます。

Reactルーターとは何ですか?

React Router は、React アプリケーションで動的ルーティングを可能にするライブラリです。これは、ナビゲーションを管理し、URL パスに基づいてさまざまなコンポーネントをレンダリングするのに役立ちます。 React Router を使用すると、単一ページのアプリケーション内でシームレスな複数ページのエクスペリエンスを作成できます。

はじめる

1. Reactルーターをインストールする

まず、React Router をインストールする必要があります。ターミナルを開いて次のコマンドを実行します:

npm install react-router-dom

2. プロジェクト構造を設定する

まだ作成していない場合は、基本的な React プロジェクトを作成します。プロジェクト フォルダーは次のようになります:

my-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Home.js
│   │   ├── About.js
│   │   └── Contact.js
│   ├── App.js
│   ├── index.js
│   └── App.css
└── package.json

3. 各ページのコンポーネントを作成する

アプリケーションの各ページのコンポーネントを作成します。この例では、Home.js、About.js、Contact.js をコンポーネント フォルダーに作成します。

Home.js

import React from 'react';

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

.js について

import React from 'react';

function About() {
  return <h1>About Page</h1>;
}

export default About;

Contact.js

import React from 'react';

function Contact() {
  return <h1>Contact Page</h1>;
}

export default Contact;

4. App.js でルーティングを設定する

次に、App.js ファイルでルーティングを構成します。必要なコンポーネントをreact-router-domからインポートし、ルートを設定します。

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

このコード内:

• BrowserRouter (別名 Router) は、ルーティングを処理するために使用されます。
• Route は、レンダリングするパスとコンポーネントを定義します。
• Route は複数の Route コンポーネントをラップします。
• Link はナビゲーション リンクを作成するために使用されます。

5. 基本的なスタイルを追加する

App.css にいくつかの基本スタイルを追加して、ナビゲーションの見栄えを良くすることができます。

App.css

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

6. アプリを実行する

最後に、次のコマンドを使用して React アプリを実行します。

npm start

ブラウザを開いて http://localhost:3000 に移動します。ナビゲーション リンクが機能しているマルチページ アプリケーションが表示されるはずです。

結論

React Router を使用すると、複数ページのアプリの構築が簡単になります。基本的なルーティングの設定、ページ コンポーネントの作成、ナビゲーションの管理方法を学習しました。 React Router の柔軟性と使いやすさにより、React 開発者にとって不可欠なツールとなり、動的でユーザーフレンドリーな Web アプリケーションを構築できるようになります。

?寄付することで私を助けることができます

以上がReact でマルチページ アプリケーションを構築する: ルーターのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。