React 路由器基礎

React Router 是一個強大的函式庫，用於在 React 應用程式中進行路由。它允許開發(fā)人員在應用程式中定義路由並管理不同視圖或元件之間的導航。 React Router 透過處理動態(tài)路由和基於 URL 的導航，可以輕鬆建立單頁應用程式 (SPA)。

---

React Router 的關鍵概念

1. 路由：它是指在應用程式中從一個 URL 導航到另一個 URL 的過程。
2. SPA（單頁應用程式）：React Router 是為 SPA 設計的，應用程式載入一次，當使用者導航到不同的路由時，僅更新部分頁面。

---

React Router 的核心元件

1. BrowserRouter（或HashRouter）：
   • 此元件是保存路由邏輯的包裝器，用於啟用導航。
   • BrowserRouter 使用 HTML5 歷史記錄 API 來操作瀏覽器的 URL 並保持 UI 同步。
   • 對於較舊的瀏覽器或不支援 HTML5 歷史記錄 API 的情況，可以使用 HashRouter（儘管它使用基於雜湊的路由）。

範例：

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

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

1. 路線：
   • 元件用於定義應用程式中的所有路由。它充當各個 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 屬性指定當路由匹配時應該渲染的元件。

範例：

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

1. 連結：
   • ;元件用於在不同的路線之間導航，而無需重新載入頁面。它呈現(xiàn)一個錨點 () 標記，該標記會對點擊事件做出反應並相應地更新瀏覽器的 URL。

範例：

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

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

1. 使用導航：
   • useNavigate 鉤子用於以程式設計方式導航到不同的路線。
   • 此鉤子通常在事件處理程序或副作用中使用。

範例：

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

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

---

基本路由範例

這是一個在功能性 React 應用程式中示範 React Router 的基本範例：

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

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

說明：

• BrowserRouter 元件包裝整個應用程式以啟用路由。
• Link 元件用於建立不會觸發(fā)頁面重新載入的導覽連結。
• Routes 元件包含所有路由，每個 Route 元素將 URL 路徑對應到元件（例如，Home、About 或 Contact）。
• 點擊連結將更新 URL 並渲染對應的元件。

---

巢狀路由

React Router 也支援巢狀路由，讓您在其他路由中定義路由。

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

說明：

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

---

使用導航重定向

您可以使用 Navigate 元件或 useNavigate 掛鉤以程式設計方式將使用者導航到不同的路線。

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

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

說明：

• Navigate 元件在渲染時會自動將使用者重新導向至 /about 路由。

---

路由參數(shù)

您可以透過包含路由參數(shù)來定義動態(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>
     );
   };

說明：

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

---

結論

React Router 讓 React 應用程式中的視圖之間的導航變得簡單且有效率。透過其 BrowserRouter、Route、Link 等元件和 useNavigate 等掛鉤，您可以建立具有複雜路由邏輯的動態(tài)單頁應用程式。透過了解 React Router 的基礎知識，包括處理路由、巢狀路由和路由參數(shù)，您可以輕鬆管理 React 應用程式中的導航。

---

以上是了解 React Router 基礎知識：在 React 中管理導航的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！