React 路由器基礎(chǔ)知識(shí)

React Router 是一個(gè)強(qiáng)大的庫(kù)，用于在 React 應(yīng)用程序中進(jìn)行路由。它允許開發(fā)人員在應(yīng)用程序中定義路由并管理不同視圖或組件之間的導(dǎo)航。 React Router 通過(guò)處理動(dòng)態(tài)路由和基于 URL 的導(dǎo)航，可以輕松創(chuàng)建單頁(yè)應(yīng)用程序 (SPA)。

---

React Router 的關(guān)鍵概念

1. 路由：它是指在應(yīng)用程序中從一個(gè) URL 導(dǎo)航到另一個(gè) URL 的過(guò)程。
2. SPA（單頁(yè)應(yīng)用程序）：React Router 是為 SPA 設(shè)計(jì)的，應(yīng)用程序加載一次，當(dāng)用戶導(dǎo)航到不同的路由時(shí)，僅更新部分頁(yè)面。

---

React Router 的核心組件

1. BrowserRouter（或HashRouter）：
   • 該組件是保存路由邏輯的包裝器，用于啟用導(dǎo)航。
   • BrowserRouter 使用 HTML5 歷史記錄 API 來(lái)操作瀏覽器的 URL 并保持 UI 同步。
   • 對(duì)于較舊的瀏覽器或不支持 HTML5 歷史記錄 API 的情況，可以使用 HashRouter（盡管它使用基于哈希的路由）。

示例：

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

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

1. 路線：
   • 組件用于定義應(yīng)用程序中的所有路由。它充當(dāng)各個(gè) Route 元素的容器。
   • 在 React Router v6 中，Routes 取代了之前的 Switch 組件。

示例：

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

1. 路線：
   • 組件定義了 URL 路徑和組件之間的映射。
   • path 屬性定義 URL，element 屬性指定當(dāng)路由匹配時(shí)應(yīng)該渲染的組件。

示例：

   <Route path="/" element={<Home />} />

1. 鏈接：
   • ;組件用于在不同的路線之間導(dǎo)航，而無(wú)需重新加載頁(yè)面。它呈現(xiàn)一個(gè)錨點(diǎn) () 標(biāo)記，該標(biāo)記對(duì)單擊事件做出反應(yīng)并相應(yīng)地更新瀏覽器的 URL。

示例：

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

1. 使用導(dǎo)航：
   • useNavigate 鉤子用于以編程方式導(dǎo)航到不同的路線。
   • 此鉤子通常在事件處理程序或副作用中使用。

示例：

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

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

---

基本路由示例

這是一個(gè)在功能性 React 應(yīng)用程序中演示 React Router 的基本示例：

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

說(shuō)明：

• BrowserRouter 組件包裝整個(gè)應(yīng)用程序以啟用路由。
• Link 組件用于創(chuàng)建不會(huì)觸發(fā)頁(yè)面重新加載的導(dǎo)航鏈接。
• Routes 組件包含所有路由，每個(gè) Route 元素將 URL 路徑映射到組件（例如，Home、About 或 Contact）。
• 點(diǎn)擊鏈接將更新 URL 并渲染相應(yīng)的組件。

---

嵌套路由

React Router 還支持嵌套路由，允許您在其他路由中定義路由。

   <Route path="/" element={<Home />} />

說(shuō)明：

• /dashboard 路由有嵌套路由：/dashboard/profile 和 /dashboard/settings。
• 通過(guò)在父路由中使用 * 通配符 (path="dashboard/*")，React Router 知道在 Dashboard 組件內(nèi)渲染子路由。

---

使用導(dǎo)航重定向

您可以使用 Navigate 組件或 useNavigate 掛鉤以編程方式將用戶導(dǎo)航到不同的路線。

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

說(shuō)明：

• Navigate 組件在渲染時(shí)會(huì)自動(dòng)將用戶重定向到 /about 路由。

---

路由參數(shù)

您可以通過(guò)包含路由參數(shù)來(lái)定義動(dòng)態(tài)路由，這些參數(shù)可用于在 URL 中傳遞值。

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

   const Login = () => {
     const navigate = useNavigate();

     const handleLogin = () => {
       // Perform login logic
       navigate('/dashboard');
     };

     return (
       <button onClick={handleLogin}>Login</button>
     );
   };

說(shuō)明：

• 路由路徑中的:userId是一個(gè)路由參數(shù)。
• useParams 鉤子用于 UserProfile 組件內(nèi)部，從 URL 中提取 userId 的值并將其呈現(xiàn)在頁(yè)面上。

---

結(jié)論

React Router 使 React 應(yīng)用程序中的視圖之間的導(dǎo)航變得簡(jiǎn)單高效。借助其 BrowserRouter、Route、Link 等組件和 useNavigate 等掛鉤，您可以創(chuàng)建具有復(fù)雜路由邏輯的動(dòng)態(tài)單頁(yè)應(yīng)用程序。通過(guò)了解 React Router 的基礎(chǔ)知識(shí)，包括處理路由、嵌套路由和路由參數(shù)，您可以輕松管理 React 應(yīng)用程序中的導(dǎo)航。

---

以上是了解 React Router 基礎(chǔ)知識(shí)：在 React 中管理導(dǎo)航的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！