了解 React Router 基礎知識：在 React 中管理導航

React 路由器基礎

React Router 是一個強大的函式庫，用於在 React 應用程式中進行路由。它允許開發人員在應用程式中定義路由並管理不同視圖或元件之間的導航。 React Router 透過處理動態路由和基於 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. 連結：
   • ;元件用於在不同的路線之間導航，而無需重新載入頁面。它呈現一個錨點 () 標記，該標記會對點擊事件做出反應並相應地更新瀏覽器的 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 元件用於建立不會觸發頁面重新載入的導覽連結。
• Routes 元件包含所有路由，每個 Route 元素將 URL 路徑對應到元件（例如，Home、About 或 Contact）。
• 點擊連結將更新 URL 並渲染對應的元件。

巢狀路由

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

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

說明：

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

使用導航重定向

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

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

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

說明：

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

路由參數

您可以透過包含路由參數來定義動態路由，這些參數可用於在 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是一個路由參數。
• useParams 鉤子用於 UserProfile 元件內部，從 URL 中提取 userId 的值並將其呈現在頁面上。

結論

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

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