React Router V6：初心者ガイド

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

キー学習ポイント：

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

Reactは、複数のビュー（ページ）で動的なWebアプリケーションを構築することに優れています。 従来のマルチページアプリとは異なり、ナビゲーションはページ全体をリロードしてはなりません。 代わりに、既存のページ内でビューをスムーズにレンダリングする必要があります。 Reactルーターはこれを宣言的に達成し、シームレスなユーザーエクスペリエンスを確保します。 ユーザーは期待しています：

各ビューの一意のURL：

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

）。

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

重要なメモ：

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

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

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

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

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

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

保護されたルートの実装。

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

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

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

   <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

   開発サーバーを起動：

   npm install react-router-dom

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

   で実行されています

   Reactルーターの基本：

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

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

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

   履歴オブジェクト

   npm start

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

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

   関数を提供します。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>
   );

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

   ネストは、他の

   コンポーネント内に

   コンポーネントを配置してルートします。 これは、ネストされたURL構造を反映しています <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

   コンポーネントは、親ルート内のチャイルドルートをレンダリングします。

   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>

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

   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>;

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

   を使用して、カスタム

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

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

   ルートを保護するために

   に統合します。 元の応答に記載されているセキュリティ上の考慮事項を覚えておいてください。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は、データの負荷と突然変異API（リミックスに触発された）を導入しました。 これらのAPIは、ローダーとアクションを使用して、ルート内でデータの取得と管理を簡素化します。 このセクションでは、別のより詳細な説明が必要です。App.js /admin

   概要：

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

   以上がReact Router V6：初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。