了解 React Router v 功能、設定和最佳實踐

React Router v6：完整指南

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

---

React Router v6 的主要功能與變化

1. 簡化的 API

   • React Router v6 引入了一個更簡單、更直觀的 API 來定義路線和導航，消除了 v5 中存在的許多解決方法的需要。

2. 路由元素（元素）

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

3. 路線匹配

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

4. 巢狀路由

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

5. 沒有更準確的

   • 在React Router v6中，所有路由預設都完全匹配，因此不需要使用exact屬性來指定精確匹配。

6. React 路由器鉤子

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

---

如何設定 React Router v6

要開始使用 React Router v6，請依照下列步驟操作：

1.安裝 React Router v6

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

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

---

2.定義路由與元件

讓我們來看一個如何在 React Router v6 中設定基本路由的範例。

第 1 步：定義主應用元件

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

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

第 2 步：建立單獨的組件

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;

關於.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 進行動態路由

為了處理動態路由，例如使用者 ID 是 URL 一部分的使用者個人資料頁面，React Router v6 提供了 useParams 鉤子。

第 1 步：定義動態路線

import React from 'react';

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

export default NotFound;

說明：

• :userId 是路由路徑中的動態區段。 useParams 鉤子可讓您存取 UserProfile 元件中 userId 的值。
• 當您導覽至 /user/123 時，UserProfile 元件將會渲染並顯示 userId 為 123。

---

React Router v6 中的巢狀路由

巢狀路由可讓您透過在父路由中定義子路由來建立複雜的佈局。

第 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;

說明：

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

---

React Router v6 Hooks

React Router v6 引入了幾個用於導航和存取路由資訊的鉤子：

1. useNavigate：以程式設計方式導航到不同的路線。
2. useParams：存取動態 URL 參數。
3. useLocation：取得目前位置（URL）的資訊。
4. useMatch：將目前 U​​RL 與給定路由配對。
5. useResolvedPath：將路徑解析為絕對 URL。

範例：使用Navigate Hook

useNavigate 掛鉤允許在您的應用程式中進行程式設計導航。

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

---

React Router v6 最佳實踐

• 預設精確比對：React Router v6 預設精確比對路由，無需指定精確即可更輕鬆地處理路由比對。
• 使用 element Prop：將 JSX 直接傳遞給 element prop，而不是使用元件 prop，從而簡化程式碼並減少對渲染函數的需求。
• 嵌套路由：使用嵌套路由透過子路由建立複雜的頁面佈局，保持程式碼模組化和可維護性。
• 使用通配符路由處理 404：使用通配符 * 捕獲所有不匹配的路由並顯示 404 頁面或將使用者重定向到預設路由。

---

結論

React Router v6 相對於先前的版本引入了多項改進，包括更簡單的 API、更好的路由匹配以及對動態和嵌套路由的增強支援。透過利用 useNavigate、useParams 和 useLocation 等鉤子，您可以在 React 應用程式中建立強大且靈活的路由系統。

---

以上是了解 React Router v 功能、設定和最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！