React Router を使用したナビゲーション React Js パート A React アプリケーションでのルーティングのガイド

React シリーズへようこそ!以前の投稿では、コンポーネント、状態、小道具、イベント処理などの重要な概念について説明しました。ここで、React Router を使用して React アプリケーションのルーティングを調べてみましょう。ルーティングを使用すると、アプリ内のさまざまなビューまたはコンポーネント間を移動でき、シームレスなユーザー エクスペリエンスを実現できます?.

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

React Router は、React アプリケーションでのルーティングを可能にする強力なライブラリです。これにより、アプリケーション内で複数のルートを定義し、URL パスに基づいて特定のコンポーネントをレンダリングできます。この機能は、ナビゲーションでページ全体のリロードを必要としないシングルページ アプリケーション (SPA) を構築する場合に非常に重要です。

React Router のインストール
始めるには、React Router をインストールする必要があります。これは、npm:
を使用して行うことができます。

npm install react-router-dom

基本的なルーティングの設定

複数のルートを持つ単純なアプリケーションをセットアップしてみましょう。ホームページ、概要ページ、お問い合わせページを含むアプリケーションを作成します。

1.基本コンポーネントの作成
まず、Home、About、Contact の 3 つのコンポーネントを作成します。

// Home.js
import React from 'react';

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

export default Home;

// About.js
import React from 'react';

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

export default About;

// Contact.js
import React from 'react';

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

export default Contact;

2.ルーターをセットアップする
次に、メイン アプリケーション ファイル (通常は App.js) でルーターを設定しましょう。

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

const 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>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </Router>
    );
};

export default App;

説明:

• Router: BrowserRouter コンポーネントはアプリケーション全体をラップし、ルーティングを可能にします。
• リンク: Link コンポーネントは、ページをリロードせずに URL を変更するナビゲーション リンクを作成するために使用されます。
• Route: Route コンポーネントは、パスと、パスが一致したときにレンダリングするコンポーネントを定義します。
• Switch: Switch コンポーネントは、一度に 1 つのルートのみがレンダリングされることを保証します。

ページ間の移動
セットアップが完了すると、ナビゲーション メニューのリンクをクリックして、[ホーム]、[バージョン情報]、および [連絡先] ページ間を移動できるようになります。 React Router は URL の変更を処理し、ページを更新せずに適切なコンポーネントをレンダリングします。

ルートパラメータ
パラメーターを使用してルートを定義し、動的データを渡すこともできます。たとえば、URL 内のユーザー ID に基づいてユーザー情報を表示する User コンポーネントを作成してみましょう。

1.ユーザーコンポーネントを作成します
ユーザー.js:

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
    const { userId } = useParams();
    return <h1>User ID: {userId}</h1>;
};

export default User;

2.ルーターを更新します
App.js に User コンポーネントのルートを追加します:

<Route path="/user/:userId" component={User} />

---

ネストされたルート

React Router はネストされたルートもサポートしており、親コンポーネント内で子ルートをレンダリングできます。これは、複雑なレイアウトを構築する場合に便利です。

ネストされたルートの例:

1. ネストされたルートを含むダッシュボード コンポーネントを作成します。

npm install react-router-dom

1. App.js を更新して、ダッシュボード ルートを含めます。

// Home.js
import React from 'react';

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

export default Home;

// About.js
import React from 'react';

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

export default About;

// Contact.js
import React from 'react';

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

export default Contact;

これで、/dashboard/profile または /dashboard/settings に移動すると、ダッシュボード内にそれぞれのコンポーネントが表示されます。

---

この投稿では、React Router を使用して React アプリケーションにルーティングを実装する方法を検討しました。基本的なルーティングの設定、ページ間の移動、ルート パラメーターの使用、ネストされたルートの作成について説明しました。

これらの概念を使用すると、React アプリケーション用の構造化ナビゲーション システムを作成し、ユーザー エクスペリエンスを強化し、動的なコンテンツ レンダリングを可能にすることができます。

次の投稿では、useEffect と機能コンポーネントの副作用を管理する方法に焦点を当てて、React Hooks の使用法を詳しく説明します。乞うご期待!

以上がReact Router を使用したナビゲーション React Js パート A React アプリケーションでのルーティングのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。