React路由器V6：初學者指南

>本教程提供了一個綜合指南，用於React Router V6，這是用於React應用程序的領先路由庫。 了解如何在您的React項目中有效管理URL和導航。 >

密鑰學習點：

• 掌握React路由器v6：本指南涵蓋了在您的React應用程序中設置和使用React Router V6進行無縫導航和URL管理的基礎。 路由導航和渲染：
發現如何使用
• ，和等核心組件創建動態和嵌套路由，包括將路徑參數用於靈活路由。 <route></route>><link>高級路由技術：
探索高級概念，例如受保護的路線，帶有
• 的程序化導航以及React Rouyter v6.4中的最新增強功能，使您能夠為現代React應用程序構建複雜的路由解決方案。 useNavigate
介紹：

React在具有多個視圖（頁面）的構建動態Web應用程序方面表現出色。 與傳統的多頁應用程序不同，導航不應重新加載整個頁面。 相反，視圖應在現有頁面中順利進行。 React路由器聲明地實現了這一目標，從而確保了無縫的用戶體驗。 用戶期望： 每個視圖的

唯一的URL：

允許書籤（例如，

）。
• >功能性返回/前向按鈕：www.example.com/products標準瀏覽器導航應按預期工作。
>
• >嵌套視圖的URL：支持動態，嵌套結構（例如，
）。
• 通過指定所需的路由結構： React路由器的聲明方法簡化了路由： example.com/products/shoes/101
組件可以放置在應用程序結構中的任何地方。 組件的簡單性，例如

>，

和其他React路由器API，使路由易於實現。

>

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

>

重要說明：<Route>> React Router是由Remix軟件維護的第三方庫，而不是官方的Facebook/Meta產品。 <Route><Link>概述：

此教程封面：

>使用NPM設置React Router。

> 基本路由概念。

嵌套路由。

帶有路徑參數的動態嵌套路由。

實施受保護的路由。
2. 完整的項目代碼可在GitHub上獲得（鏈接要在此處插入）。
3. 設置React Router：
4. >

   >您需要安裝node.js。 如果沒有，請從官方Node.js網站下載。 考慮使用版本管理器進行更輕鬆的node.js管理。 NPM（Node Package Manager）與node.js捆綁在一起。 驗證安裝：

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

   >使用Create React App：創建一個新的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路由器現在正在運行

   >。 http://localhost:3000/

   React Router基礎知識：>

   我們將創建一個具有三個視圖的應用程序：家庭，類別和產品。 > 路由器組件

   >用路由器包裝主應用程序組件：>>>。
   （使用HTML5歷史記錄API）通常是清潔URL的首選：
   歷史對象

   BrowserRouter每個路由器都會創建一個管理導航堆棧的歷史記錄對象。 更改位置觸發重新渲染。 HashRouter（掛鉤）為程序化導航提供了BrowserRouter函數。

   >鏈接和路由組件

   npm start

   如果位置與路徑匹配，則

   >

   呈現UI。

   提供導航，而沒有頁面重新加載。 useNavigate navigate> update

   ：

   這設置了基本的導航和路由。 <Route> <Link>

   嵌套路由：

   App.js嵌套路由將

   組件放在其他

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

   >組件中。 這反映了嵌套的URL結構。
   修改

   ：

   創建

   ：<Route> <Route>

   App.js組件在父路線中呈現子路由。 >

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

   >

   > update<Outlet>：

   參數使用

   >。

   *保護路線： 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>;

   創建

   ：:productId Product useParams>添加一個

   組件，然後集成

   到中以保護>路由。 請記住原始響應中提到的安全考慮。

   >

   useNavigate React Router V6.4及以後：PrivateRoute>

   > React Router V6.4引入了數據加載和突變API（受到混音的啟發）。 這些API使用加載程序和操作簡化了路線內的數據獲取和管理。 本節將需要一個單獨的，更詳細的說明。

   > 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的全面概述，涵蓋了基本和高級路由概念。 請記住要查閱官方的React Router文檔以獲取最新信息和詳細信息。

   >

   以上是React路由器V6：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！