React Router 是 React 應(yīng)用中最常用的路由管理工具，能實現(xiàn)頁面間無刷新導(dǎo)航。要使用它，首先安裝 react-router-dom 并在主入口文件中引入 BrowserRouter 包裹應(yīng)用。1. 定義路由時使用 Routes 和 Route 組件，將路徑與對應(yīng)組件關(guān)聯(lián)；2. 頁面跳轉(zhuǎn)推薦使用 Link 組件，函數(shù)內(nèi)跳轉(zhuǎn)可使用 useNavigate 鉤子；3. 處理 404 頁面可用通配符 *，動態(tài)路由可通過 :參數(shù)名 實現(xiàn)，并利用 useParams 獲取參數(shù)值。掌握這些核心功能即可構(gòu)建清晰結(jié)構(gòu)的單頁應(yīng)用。

React Router 是 React 應(yīng)用中最常用的路由管理工具，它能讓你輕松實現(xiàn)頁面之間的導(dǎo)航。如果你正在開發(fā)一個單頁應(yīng)用（SPA），使用 React Router 可以幫助你構(gòu)建清晰的 URL 結(jié)構(gòu)，并在不同視圖之間切換而無需刷新頁面。

基本安裝和配置

要開始使用 React Router，首先需要安裝它。如果你用的是 React 17 或更新版本，推薦使用 react-router-dom：

npm install react-router-dom

然后，在你的主入口文件（通常是 index.js 或 App.js）中引入 BrowserRouter 并包裹整個應(yīng)用：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

這樣就開啟了路由功能，接下來就可以定義不同的路徑了。

定義路由和頁面組件

使用 <Routes> 和 <Route> 組件來定義路徑和對應(yīng)的組件。比如你有首頁、關(guān)于頁和聯(lián)系頁三個頁面：

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

• 每個 <Route> 表示一個路徑與組件的映射關(guān)系
• path 是 URL 路徑，element 是要渲染的組件
• 根路徑 / 通常放在最前面，作為默認頁面

注意：React Router v6 開始不再支持嵌套的 <Route> 寫法，而是通過 children 或者 useNavigate 等方式處理子路由或動態(tài)跳轉(zhuǎn)。

實現(xiàn)頁面跳轉(zhuǎn)

用戶點擊鏈接進行導(dǎo)航時，不要使用原生的 <a> 標(biāo)簽，因為那會觸發(fā)頁面刷新。應(yīng)該使用 React Router 提供的 <Link> 組件：

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

<Link to="/">首頁</Link>
<Link to="/about">關(guān)于我們</Link>
<Link to="/contact">聯(lián)系我們</Link>

• to 屬性指定目標(biāo)路徑
• 渲染出來的 HTML 是普通的 <a> 標(biāo)簽，但點擊不會刷新頁面

如果是在函數(shù)內(nèi)部（比如按鈕點擊事件中）執(zhí)行跳轉(zhuǎn)，可以使用 useNavigate 鉤子：

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/about")}>
      進入關(guān)于我們頁面
    </button>
  );
}

這種方式適用于表單提交后跳轉(zhuǎn)、權(quán)限驗證失敗跳回登錄頁等場景。

處理 404 頁面和動態(tài)路由

有時候用戶會訪問不存在的頁面，或者你需要根據(jù) URL 參數(shù)加載內(nèi)容，這時候可以用通配符和參數(shù)匹配：

<Route path="*" element={<NotFound />} />
<Route path="/user/:id" element={<UserProfile />} />

• * 匹配所有未定義的路徑，用于顯示 404 頁面
• :id 是一個動態(tài)參數(shù)，可以通過 useParams() 獲取值

例如在 UserProfile 組件中：

import { useParams } from "react-router-dom";

function UserProfile() {
  const { id } = useParams();
  return <div>正在查看用戶 ID：{id}</div>;
}

這在展示詳情頁、文章頁、用戶資料等場景非常實用。

基本上就這些常用功能了。React Router 的設(shè)計很靈活，能滿足大多數(shù)前端路由需求。只要掌握好基本結(jié)構(gòu)和跳轉(zhuǎn)方式，就能快速搭建出帶導(dǎo)航的 React 應(yīng)用。

以上がナビゲーションにReactルーターの使用方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。