React Router DOM 使用指南：提升 Web 應用程式導航體驗

前端

2023-11-01 10:01:36

React Router DOM：探索複雜路由的強大工具

在動態 Web 應用程式的世界中，導航扮演著不可或缺的角色。它賦予使用者暢遊介面、與內容互動並享受無縫體驗的能力。React Router DOM 是 React 生態系統中的一項強大的工具，讓你可以輕鬆打造複雜且使用者友善的導航功能。

理解 React Router DOM 基礎

React Router DOM 是用於管理 React 應用程式路由的 JavaScript 函式庫。它建立在 HTML5 的歷史記錄 API 之上，提供了一組直觀的組件來簡化路由邏輯。

核心組件

Route： 表示單一路由，定義了特定路徑和要渲染的組件。
Switch： 包裹住多個 Route，確保一次只渲染一個 Route。
Link： 用於導向其他路由，類似於 HTML 中的 anchor 標籤。
Redirect： 將使用者重新導向到其他路由。
withRouter： 將路由資訊作為 props 傳遞給組件的高階組件。

使用範例

以下程式碼示範如何使用 React Router DOM 定義路由：

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
};

const Home = () => <h1>首頁</h1>;
const About = () => <h1>關於我們</h1>;
const Contact = () => <h1>聯絡我們</h1>;

高級功能

除了基本組件，React Router DOM 還提供以下高級功能：

動態路由： 透過變數路由參數建立動態路由。
嵌套路線： 嵌套 Route 來建立階層式導航結構。
受保護路線： 驗證使用者身分，並根據身分限制存取。
延遲載入： 延遲載入組件，提升初始載入效能。

SEO 最佳化

React Router DOM 提供內建功能來優化 SEO：

：使用 HTML5 歷史記錄 API，讓搜尋引擎可以爬取你的應用程式。
Link： 使用 HTML anchor 標籤，為搜尋引擎提供明確的 URL。
HashRouter： 在不支持 HTML5 歷史記錄 API 的瀏覽器中提供回退方案。

使用說明

若要使用 React Router DOM，請按照以下步驟：

安裝：npm install react-router-dom
建立環境：在你的應用程式中包住<BrowserRouter>。
定義路線：使用Route組件定義路線及其組件。
使用Link：使用Link組件在路線之間導航。

常見問題解答

為什麼要使用 React Router DOM？ 它簡化了路由邏輯，讓你可以輕鬆建立複雜的導航功能。
React Router DOM 和 React Native 的路由有什麼不同？ React Router DOM 專門用於 Web 應用程式，而 React Native 的路由則用於行動應用程式。
如何處理 404 錯誤？ 使用 <Redirect> 組件來重新導向到錯誤頁面。
如何驗證使用者身分以存取受保護路線？ 可以使用驗證庫，例如 react-redux 或 react-firebase-hooks。
如何延遲載入組件？ 使用 React.lazy 或 Suspense。