我的 React 之旅：第 27 天

反應路由器

今天的重點是掌握 React Router，這是在 React 單頁應用程式 (SPA) 中建立無縫導航的關鍵工具。讓我帶您了解我的學習歷程和發現！

我從使用 React Router 建置導覽中學到了什麼
1.設定與安裝：
為了開始使用 React Router，我安裝了該程式庫：

npm install react-router-dom

接下來，我導入了必要的模組：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

2.建立路線：
我使用 createBrowserRouter 建立路由，定義路徑並將它們連結到特定元件。

範例：

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/profiles', element: <ProfilesPage /> },
  { path: '/profiles/:profileId', element: <ProfilePage /> },
]);

• 動態 URL：路由路徑：'/profiles/:profileId' 示範動態路由。它允許我根據 profileId 渲染一個獨特的個人資料頁面。
• 錯誤處理：新增 errorElement 確保導覽至無效 URL 的使用者看到 404 Not Found 頁面。

3.處理404錯誤：
我使用 React Router 的 Link 元件建立了一個自訂錯誤頁面 (NotFoundPage.jsx)：

<Link to="/">Home</Link>

這允許導航回到主頁，而無需完全刷新瀏覽器，從而保持 SPA 體驗。

4.動態映射元件：
在ProfilesPage.jsx中，我使用map方法為每個設定檔動態產生連結：

{profiles.map((profile) => (
  <Link key={profile} to={`/profiles/${profile}`}>
    Profile {profile}
  </Link>
))}

這使得它可以擴展，因為可以添加新的設定檔而無需重寫程式碼。

5.頁面結構：
每個頁面/元件都有特定的用途：

• 首頁：使用者造訪/時顯示的預設內容。
• 個人資料頁面：列出個人資料的連結。
• 個人資料頁面：顯示與特定個人資料相關的動態內容的佔位符。
• NotFoundPage：處理無效 URL，增強使用者體驗。

6.避免整頁刷新：
我了解到使用 元件而不是 標籤可防止不必要的整頁重新載入。這使應用程式保持快速和響應。

7.渲染巢狀視圖：
借助 React Router，我可以透過有效建立路由來輕鬆渲染嵌套元件或佈局。

最後的想法
React Router 是建立豐富且使用者友好的 SPA 的重要工具。其動態路由、優雅處理錯誤以及確保無縫導航體驗的能力非常強大。

以上是我的 React 之旅：第 27 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！