このチュートリアルは、Reactアプリケーション用の主要なルーティングライブラリであるReact Router V6の包括的なガイドを提供します。 Reactプロジェクト內(nèi)でURLとナビゲーションを効率的に管理する方法を?qū)Wびましょう。

キー學(xué)習(xí)ポイント：

マスタリングReact Router V6：
• このガイドは、ReactアプリケーションでシームレスなナビゲーションとURL管理のためにReact Router V6をセットアップと使用の基本をカバーしています。 ルートナビゲーションとレンダリング：
柔軟なルーティングにパスパラメーターの使用を含む
• 、、などのコアコンポーネントを使用して動(dòng)的およびネストされたルートを作成する方法を発見します。<routes></routes> <route></route><link>高度なルーティング手法：
保護(hù)されたルート、
• を使用したプログラムナビゲーション、React Router v6.4の最新の拡張などの高度な概念を探索し、最新のReactアプリケーション向けの洗練されたルーティングソリューションを構(gòu)築できるようになります。 。 useNavigate
はじめに：

Reactは、複數(shù)のビュー（ページ）で動(dòng)的なWebアプリケーションを構(gòu)築することに優(yōu)れています。 従來のマルチページアプリとは異なり、ナビゲーションはページ全體をリロードしてはなりません。 代わりに、既存のページ內(nèi)でビューをスムーズにレンダリングする必要があります。 Reactルーターはこれを宣言的に達(dá)成し、シームレスなユーザーエクスペリエンスを確保します。 ユーザーは期待しています：

各ビューの一意のURL：

ブックマークを許可（例えば、

）。

• 機(jī)能的なバック/フォワードボタン：標(biāo)準(zhǔn)ブラウザナビゲーションは、予想どおりに機(jī)能するはずです。 ネストされたビュー用のwww.example.com/products
url：
• ダイナミックでネストされた構(gòu)造をサポートする（例：）。
React Routerの宣言的アプローチは、目的のルート構(gòu)造を指定することによりルーティングを簡素化します。
• コンポーネントは、アプリケーションの構(gòu)造內(nèi)に配置できます。 example.com/products/shoes/101、
、その他のReactルーターAPIなどのコンポーネントのシンプルさにより、ルーティングが簡単に実裝できます。

重要なメモ：

React Routerは、公式のFacebook/Meta製品ではなく、Remixソフトウェアが管理するサードパーティライブラリです。

<Route path="/about" element={<About />} />

概要：<Route> <Route> このチュートリアルカバー：<Link>

NPMを使用してReactとReactルーターのセットアップをセットアップします

基本的なルーティングの概念。 ネストされたルーティング。

パスパラメーターを備えた動(dòng)的ネストルーティング。

保護(hù)されたルートの実裝。

完全なプロジェクトコードはGitHubで入手できます（ここに挿入するリンク）。

Reactルーターのセットアップ：

1. node.jsがインストールされる必要があります。 そうでない場合は、公式node.jsのWebサイトからダウンロードしてください。 node.js管理を容易にするためにバージョンマネージャーを使用することを検討してください。 NPM（ノードパッケージマネージャー）はnode.jsにバンドルされています インストールの確認(rèn)：

   <Route path="/about" element={<About />} />

   Create Reactアプリを使用して新しいReactプロジェクトを作成します：

   node -v
   npm -v

   React Router Dom：

   をインストールします

   npx create-react-app react-router-demo
   cd react-router-demo

   開発サーバーを起動(dòng)：

   npm install react-router-dom

   React React Routerを使用したReactアプリがhttp://localhost:3000/。

   で実行されています

   Reactルーターの基本：

   ホーム、カテゴリ、製品の3つのビューを持つアプリを作成します。

   ルーターコンポーネント
   メインアプリコンポーネントをルーターでラップします：

   またはBrowserRouter。 HashRouter（HTML5 History APIを使用）は、一般的にクリーナーのURLよりも好まれます。 BrowserRouter

   履歴オブジェクト

   npm start

   各ルーターは、ナビゲーションスタックを管理する履歴オブジェクトを作成します。 場所の変更トリガーの再レンダリング。

   （hook）プログラマティックナビゲーションに

   関數(shù)を提供します。useNavigate navigateリンクおよびルートコンポーネント

   場所がパスと一致する場合、
   uiをレンダリングします。

   ページリロードなしでナビゲーションを提供します。<Route> <Link>update

   ：

   App.js

   これにより、基本的なナビゲーションとルーティングがセットアップされます。

   // src/index.js
   import { BrowserRouter } from 'react-router-dom';
   // ...
   root.render(
     <React.StrictMode>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </React.StrictMode>
   );

   ネストされたルーティング：

   ネストは、他の

   コンポーネント內(nèi)に

   コンポーネントを配置してルートします。 これは、ネストされたURL構(gòu)造を反映しています <Route>変更<Route>：

   App.jscreate

   ：

   import { Link, Route, Routes } from 'react-router-dom';
   // ... component definitions for Home, Categories, Products ...
   export default function App() {
     return (
       <div>
         <nav>
           <ul>
             <li><Link to="/">Home</Link></li>
             <li><Link to="/categories">Categories</Link></li>
             <li><Link to="/products">Products</Link></li>
           </ul>
         </nav>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/categories" element={<Categories />} />
           <Route path="/products" element={<Products />} />
         </Routes>
       </div>
     );
   }

   Categories.js

   コンポーネントは、親ルート內(nèi)のチャイルドルートをレンダリングします。

   import { Link, Route, Routes } from 'react-router-dom';
   import { Categories, Desktops, Laptops } from './Categories'; // Import nested route components
   
   // ... other components ...
   
   export default function App() {
     return (
       <div>
         {/* ... navigation ... */}
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/categories" element={<Categories />}>
             <Route path="desktops" element={<Desktops />} />
             <Route path="laptops" element={<Laptops />} />
           </Route>
           <Route path="/products/*" element={<Products />} /> {/* Note the trailing * */}
         </Routes>
       </div>
     );
   }

   ダイナミックネストルーティング：<Outlet>

   パスパラメーターを使用して、動(dòng)的ルートを作成します。 子ルートを許可するために、親ルートにトレーリングを追加します。 パラメーターにアクセスするには、を使用してください。

   update

   ：* useParams

   Products.js。

   。

   import { Link, Outlet } from 'react-router-dom';
   
   export const Categories = () => (
     <div>
       <h2>Categories</h2>
       <nav>
         <ul>
           <li><Link to="desktops">Desktops</Link></li>
           <li><Link to="laptops">Laptops</Link></li>
         </ul>
       </nav>
       <Outlet />
     </div>
   );
   
   export const Desktops = () => <h3>Desktop PC Page</h3>;
   export const Laptops = () => <h3>Laptops Page</h3>;

   ルートの保護(hù)：:productIdProduct useParamsプログラマティックリダイレクトに

   を使用して、カスタム

   コンポーネントを作成します。 create：

   useNavigateaPrivateRouteコンポーネントを追加し、

   ルートを保護(hù)するために

   に統(tǒng)合します。 元の応答に記載されているセキュリティ上の考慮事項(xiàng)を覚えておいてください。PrivateRoute.js

   // ... (import statements and productData) ...
   
   const Products = () => (
     <div>
       <h2>Products</h2>
       <ul> {/* ... linkList (generated from productData) ... */} </ul>
       <Routes>
         <Route path=":productId" element={<Product data={productData} />} />
         <Route index element={<p>Please select a product.</p>} />
       </Routes>
     </div>
   );
   
   // ... Product component ...

   React Router v6.4以降：

   Login PrivateRouteReact Router v6.4は、データの負(fù)荷と突然変異API（リミックスに觸発された）を?qū)毪筏蓼筏俊? これらのAPIは、ローダーとアクションを使用して、ルート內(nèi)でデータの取得と管理を簡素化します。 このセクションでは、別のより詳細(xì)な説明が必要です。App.js /admin

   概要：

   このチュートリアルは、React Router V6の包括的な概要を提供し、基本的および高度なルーティングの概念をカバーしています。 最新の情報(bào)と詳細(xì)については、公式のReactルーターのドキュメントを參照してください。

   以上がReact Router V6：初心者ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。