React Router を理解する: 初心者向けのステップバイステップ ガイド

#React Router は、React アプリケーションでナビゲーションを処理するための最も人気のあるライブラリの 1 つです。これにより、開発者は動的ルーティングを備えたシングルページ アプリケーション (SPA) を構築でき、シームレスで応答性の高いユーザー エクスペリエンスを実現できます。このガイドでは、React Router の基礎と、React Router を使用して React アプリでナビゲーションを構築する方法について説明します。

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

React Router は、React アプリケーションでナビゲーションとルーティングを管理できるようにするライブラリです

React Router を使用する理由

1. ダイナミックナビゲーション:

ページを再読み込みせずにビュー間のスムーズな移行を可能にします。

2. 宣言型ルーティング:

ルートは JSX を使用して定義されているため、読み取りと管理が簡単です。

3. ネストされたルート:

複雑なルーティング階層が可能です。

4. URL パラメータのサポート:

URL に基づいて動的コンテンツのレンダリングを有効にします。

React Router の入門

インストール

React Router を使用するには、npm または Yarn 経由でライブラリをインストールします。
npm install 反応ルーターダム
または
糸追加反応ルーターダム

基本的なセットアップ

シンプルな React アプリケーションで React Router をセットアップする方法は次のとおりです。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function Home() {
  return <h2 id="Home-Page">Home Page</h2>;
}

function About() {
  return <h2 id="About-Page">About Page</h2>;
}

function App() {
  return (
    <router>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/about" element="{<About"></route>} />
      </routes>
    </router>
  );
}

export default App;

• BrowserRouter : アプリケーションをラップし、ルーティング機能を提供します。
• ルート: 複数のルートを定義するためのコンテナです。
• ルート: パスとその関連コンポーネントを定義します

React Router の主な機能

1. 動的ルート

React Router は、URL パラメーターを使用した動的ルートをサポートします。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams(); // Access the dynamic URL parameter
  return <h2 id="User-ID-id">User ID: {id}</h2>;
}

function App() {
  return (
    <router>
      <routes>
        <route path="/user/:id" element="{<User"></route>} />
      </routes>
    </router>
  );
}

export default App;

2. ナビゲーションリンク

の代わりに Link または NavLink コンポーネントを使用します。パフォーマンスを向上させるためのタグ。

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <link to="/">Home
      <link to="/about">About
    </nav>
  );
}

• リンク: ページ全体のリロードを防ぎ、ナビゲーションを高速化します。
• NavLink : 現在アクティブなルートにアクティブなスタイルを提供します。

3. 遅延読み込み

コンポーネントを遅延読み込みすることでパフォーマンスを最適化します。

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
        </routes>
      </suspense>
    </router>
  );
}

export default App;

結論

React Router は、ルートを管理するための宣言的かつ動的な方法を提供することで、React アプリケーションのナビゲーションを簡素化します。単純な SPA を構築する場合でも、複雑なネストされたアプリケーションを構築する場合でも、React Router をマスターすると、開発スキルが大幅に向上します。

以上がReact Router を理解する: 初心者向けのステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。