返回文章列表
2026/4/22 React, 技術
React Router 核心指南
核心組件介紹
- HashRouter:路由的容器。
- Routes:路由的「總機」,用來包裹所有的路徑設定。
- Route:定義單一對應關係,例如:/orders 對應到 OrderList 組件。
- Link:取代傳統的
<a>標籤,點擊時不會重新整理網頁。 - useParams:用來抓取網址上的參數(例如:/order/A101 裡的 A101)。
完整範例說明
完整的模組化範例,分為三個檔案:佈局 (Layout)、路由表 (Router) 以及 主入口 (App)。
Layout.js(定義外殼與 Outlet)
這個檔案負責定義Header、Footer以及子頁面出現的位置。
javascript source casejavascript
router.js(路由設定檔)
用物件陣列來定義路徑關係。
javascript source casejavascript
App.js(主進入點)
javascript source casejavascript
常用的路由 Hooks
useParams(抓取變數)
用於從網址取得 ID(如:修改訂單、查看細節)。
javascript source casejavascript
useNavigate(程式跳轉)
用於功能邏輯完成後跳轉頁面。
javascript source casejavascript
2-1. 返回上一頁:當使用者在編輯頁點選「取消」時:
javascript source casejavascript
2-2. 防止回到登入頁:登入成功跳轉到首頁時,使用 replace: true 覆蓋歷史紀錄,防止使用者按後退鍵又回到登入畫面:
javascript source casejavascript
useRoutes(啟動路由)
在 App.js 中將陣列物件轉換為可渲染的組件。
javascript source casejavascript
進階實戰技巧
- 麵包屑導航 (Breadcrumbs)
利用 自動解析當前路徑,產生導覽路徑。這在層級很深的系統中非常實用。
- 放置位置:建議放在 的 標籤內,並置於 之上。
- 路由守衛 (Private Route)
用於攔截未登入的使用者,防止直接透過網址進入。
建立守衛組件
在 中包裹需要權限的頁面
分享這篇技術心得 / Share
若這份筆記對您有所啟發,歡迎分享給更多同好。
延伸閱讀 / Related Cases
React
useEffect:與外部世界互動的橋樑
什麼是 useEffect? 當組件「渲染後」需要執行動作(如:抓取資料、訂閱事件、修改 DOM),就要用 useEffect。 useEffect 讓您在組件「渲染後」執行某些操作。這些操作通常不直接參與畫面繪製,而是與外部世界互動。 核心觀念: - React 的渲染過程應該是純粹的(輸入什麼
React
useRef:掌握 React 的「儲物櫃」與 DOM 操控
什麼是 useRef? useRef 回傳一個帶有 current 屬性的物件。它有兩個最主要的用途: 1. 存取 DOM 元素:直接抓取網頁上的 HTML 標籤(例如讓輸入框聚焦)。 2. 儲存「不需要渲染」的資料:存放在裡面的資料改變時,不會觸發組件重新渲染。 核心觀念: - 如果您希望