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 
Home Page
;
};

export default Home;

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

const About = () => {
    return 
About Page
;
};

export default About;

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

const Contact = () => {
    return 
Contact Page
;
};

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 (
        
    );
};

export default App;

説明：

• Router: BrowserRouter コンポーネントはアプリケーション全体をラップし、ルーティングを有効にします。
• Link: 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 
User ID: {userId}
;
};

export default User;

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

ネストされたルート

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

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

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

// Dashboard.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Settings from './Settings';
import Profile from './Profile';

const Dashboard = () => {
    return (
        

            
Dashboard
            
    );
};

export default Dashboard;

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

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

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

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

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