React Router v6：完整指南

React Router 是 React 應(yīng)用程式中用於路由的最受歡迎的函式庫(kù)。它允許您根據(jù) URL 在不同元件之間導(dǎo)航，提供單頁(yè)應(yīng)用程式 (SPA) 體驗(yàn)，無(wú)需重新載入整個(gè)頁(yè)面即可更新內(nèi)容。 React Router v6 是最新的主要版本，與先前的版本相比，引入了一系列改進(jìn)、簡(jiǎn)化和新功能。

---

React Router v6 的主要功能與變化

1. 簡(jiǎn)化的 API

   • React Router v6 引入了一個(gè)更簡(jiǎn)單、更直觀的 API 來(lái)定義路線和導(dǎo)航，消除了 v5 中存在的許多解決方法的需要。

2. 路由元素（元素）

   • 在 v6 中，路由現(xiàn)在使用 element 屬性而不是 component 或 render 屬性。這允許您直接傳遞元件進(jìn)行渲染。
   • 舊版 (v5)：元件={ComponentName}
   • 新 (v6): element={}

3. 路線匹配

   • 路線匹配現(xiàn)在更直觀。在 v6 中，路由完全匹配，這意味著選擇最佳匹配，並且不再需要「包羅萬(wàn)象」的路由來(lái)處理動(dòng)態(tài)段。
   • 元件被替換為 ，它用於僅渲染與 URL 匹配的第一個(gè)路由。

4. 巢狀路由

   • React Router v6 讓定義巢狀路由變得更加容易。現(xiàn)在，您可以使用 element 屬性直接定義嵌套路由，而不是使用渲染或子元素進(jìn)行嵌套。

5. 沒(méi)有更準(zhǔn)確的

   • 在React Router v6中，所有路由預(yù)設(shè)都完全匹配，因此不需要使用exact屬性來(lái)指定精確匹配。

6. React 路由器鉤子

   • React Router v6 更新了鉤子以匹配其新架構(gòu)，包括 useNavigate、useParams、useLocation、useMatch 和 useNavigate。

---

如何設(shè)定 React Router v6

要開(kāi)始使用 React Router v6，請(qǐng)依照下列步驟操作：

1.安裝 React Router v6

您可以使用npm或yarn安裝React Router v6。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

2.定義路由與元件

讓我們來(lái)看一個(gè)如何在 React Router v6 中設(shè)定基本路由的範(fàn)例。

第 1 步：定義主應(yīng)用元件

npm install react-router-dom@6
# or
yarn add react-router-dom@6

• ：這取代了先前版本的組件。它確保僅渲染第一個(gè)匹配的路線。
• } />：定義首頁(yè)的路由並渲染 Home 元件。
• ：*通配符用於處理404錯(cuò)誤或不匹配的路由，當(dāng)URL與任何路由都不匹配時(shí)渲染NotFound元件。

第 2 步：建立單獨(dú)的組件

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;

關(guān)於.js

import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

---

使用 React Router v6 進(jìn)行動(dòng)態(tài)路由

為了處理動(dòng)態(tài)路由，例如使用者 ID 是 URL 一部分的使用者個(gè)人資料頁(yè)面，React Router v6 提供了 useParams 鉤子。

第 1 步：定義動(dòng)態(tài)路線

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

說(shuō)明：

• :userId 是路由路徑中的動(dòng)態(tài)區(qū)段。 useParams 鉤子可讓您存取 UserProfile 元件中 userId 的值。
• 當(dāng)您導(dǎo)覽至 /user/123 時(shí)，UserProfile 元件將會(huì)渲染並顯示 userId 為 123。

---

React Router v6 中的巢狀路由

巢狀路由可讓您透過(guò)在父路由中定義子路由來(lái)建立複雜的佈局。

第 1 步：定義父子路由

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

說(shuō)明：

• 儀表板組件包含用於概述和設(shè)定的巢狀路由。
• 父路由中的 /* 確保所有子路由都在 /dashboard 下處理。

---

React Router v6 Hooks

React Router v6 引入了幾個(gè)用於導(dǎo)航和存取路由資訊的鉤子：

1. useNavigate：以程式設(shè)計(jì)方式導(dǎo)航到不同的路線。
2. useParams：存取動(dòng)態(tài) URL 參數(shù)。
3. useLocation：取得目前位置（URL）的資訊。
4. useMatch：將目前 U??RL 與給定路由配對(duì)。
5. useResolvedPath：將路徑解析為絕對(duì) URL。

範(fàn)例：使用Navigate Hook

useNavigate 掛鉤允許在您的應(yīng)用程式中進(jìn)行程式設(shè)計(jì)導(dǎo)航。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

React Router v6 最佳實(shí)踐

• 預(yù)設(shè)精確比對(duì)：React Router v6 預(yù)設(shè)精確比對(duì)路由，無(wú)需指定精確即可更輕鬆地處理路由比對(duì)。
• 使用 element Prop：將 JSX 直接傳遞給 element prop，而不是使用元件 prop，從而簡(jiǎn)化程式碼並減少對(duì)渲染函數(shù)的需求。
• 嵌套路由：使用嵌套路由透過(guò)子路由建立複雜的頁(yè)面佈局，保持程式碼模組化和可維護(hù)性。
• 使用通配符路由處理 404：使用通配符 * 捕獲所有不匹配的路由並顯示 404 頁(yè)面或?qū)⑹褂谜咧囟ㄏ虻筋A(yù)設(shè)路由。

---

結(jié)論

React Router v6 相對(duì)於先前的版本引入了多項(xiàng)改進(jìn)，包括更簡(jiǎn)單的 API、更好的路由匹配以及對(duì)動(dòng)態(tài)和嵌套路由的增強(qiáng)支援。透過(guò)利用 useNavigate、useParams 和 useLocation 等鉤子，您可以在 React 應(yīng)用程式中建立強(qiáng)大且靈活的路由系統(tǒng)。

---

以上是了解 React Router v 功能、設(shè)定和最佳實(shí)踐的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！