反応のネストされたルーティングを理解する

このチュートリアルは、Reactルーターを使用したReactアプリケーションでネストされたルーティングを示しています。 概念と実装を説明するための簡単なWebサイトを構築します。

ネストされたルートを理解

コードに飛び込む前に、ウェブサイトの構造を調べてみましょう。 メインナビゲーションには、ホームページへのリンク、ダッシュボード、製品セクションが含まれます。 ホームとダッシュボードには、シンプルなルートがあります（

、

）。 ただし、製品セクションは、より良い組織のためにネストされたルートを利用しています。 製品セクション内には、検索、製品リストの表示、新製品の追加、個々の製品の詳細の表示のためのルートがあります。 これらのネストされたルートは/homeの下で構成され、その結果、/dashboard、/products、/products/add。 /products/all/products/searchプロジェクトのセットアップ

フォルダーに整理されたコンポーネントを備えたプロジェクト構造を使用します。 次のファイルを作成します：

、

（a
• フォルダー）Home.js Dashboard.jscomponents、
、
• 、Products.js、AddProduct.js（すべてProductsList.jsフォルダー内）。SingleProduct.js ProductSearch.js components/products
React Routerのインストール

必要なパッケージをインストール：

app.js npm install react-router-dom

でルートを実装します

ファイルには、メインルーティング構成が含まれます。 まず、必要なコンポーネントをインポートします：

次に、App.jsコンポーネント内のルートを定義します：

import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./components/Home";
import Products from "./components/products/Products";
import Dashboard from "./components/Dashboard";
import ProductsSearch from "./components/products/ProductsSearch";
import AddProduct from "./components/products/AddProduct";
import SingleProduct from "./components/products/SingleProduct";
import ProductsList from "./components/products/ProductsList";

Appルートの子供としてどのように定義されているかに注意してください。 これにより、ネストされた構造が作成されます。

ルート内の

function App() {
  return (
    <router>
      <nav>
        <link to="/">Home
        <link to="/dashboard">Dashboard
        <link to="/products/search">Products
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/dashboard" element="{<Dashboard"></route>} />
        <route path="/products" element="{<Products"></route>}>
          <route path="search" element="{<ProductsSearch"></route>} />
          <route path="list" element="{<ProductsList"></route>} />
          <route path="add" element="{<AddProduct"></route>} />
          <route path=":id" element="{<SingleProduct"></route>} />
        
      </routes>
    </router>
  );
}

export default App;

パラメーターは、製品IDに基づいて動的なルーティングを可能にします。

/productsダイナミックルートとデータフェッチ/products:id SingleProduct

コンポーネントは、

パラメーターに基づいてデータを取得する必要がある可能性があります。 このパラメーターにアクセスするには、フックを使用してフックを使用できます。 サンプルデータを実際のデータフェッチメカニズムに置き換えることを忘れないでください。

SingleProduct結論iduseParams react-router-domこのチュートリアルは、反応中のネストされたルーティングの実用的な例を提供します。 ルートを慎重に構成することにより、よく組織化され、保守可能なReactアプリケーションを作成できます。 完全なソースコード（Brevityのためにここには含まれていませんが）は、特定のニーズに合わせて適応および拡張できます。 より高度な機能とオプションについては、Reactルーターのドキュメントを参照してください。

以上が反応のネストされたルーティングを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。