如何使用 React Router V6:初學者指南

React Router 是最流行的庫，可用於在 React 應用程序中實現路由。它提供了一種基於組件的方法來處理各種路由任務，包括頁面導航、查詢參數等等。

React Router 版本 6 對其路由算法進行了重大修改，以糾正該軟件先前迭代中固有的缺陷並提供更先進、更高效的路由管理系統。

使用 React Router V6 進行路由入門

要啟動該過程，您可以建立一個 React 應用程序或使用 Vite 作為開發服務器來配置一個 React 項目。項目建立後，繼續在項目的依賴項中引入react-router-dom庫。

 npm install react-router-dom 

使用 React Router 創建路由

將整個應用程序封裝在“BrowserRouter”組件中是創建路由的有效方法。為了實現這一點，請更新相關的 JavaScript 文件，例如 index.jsx 或 main.jsx 。通過合併建議的修改，您將成功地為應用程序中的路由奠定基礎。

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App/>
    </Router>
  </React.StrictMode>,
)

使用應用程序組件周圍的 BrowserRouter 包裝器可以完全訪問 React Router 庫提供的路由功能和功能，涵蓋整個應用程序。

使用路由組件

一旦您的應用程序被 BrowserRouter 組件包含，就可以描述路由配置。

就 React Router 中的功能而言，Routes 組件比其前身 Switch 組件有了重大進步。該組件提供對相對路由的支持，從而實現應用程序不同部分之間的平滑過渡；它還具有自動路線排名功能，確保用戶根據其導航歷史記錄被引導至最相關的內容；此外，它還可以處理嵌套路由，使開發人員能夠輕鬆創建複雜的頁面層次結構。

一般來說，路由通常定義在應用程序的頂級組件中，例如 App 組件。儘管如此，它們的位置可能會根據項目的具體組織結構而有所不同。

請打開項目目錄中的“App.jsx”文件，並將其中的默認 React 代碼替換為下面提供的模板:

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Dashboard/>}/>
        <Route path="/about" element={<About/>}/>
      </Routes>
    </>
  )
}

export default App 

上述路由設置將指定的 URL 路徑定向到各自的頁面元素，即儀表板和關於，從而保證應用程序在通過特定 URL 地址訪問時顯示正確的元素。

考慮一下 Route 組件中“element”屬性的功能，它使人們能夠傳達功能組件，而不僅僅是識別其名稱。這種佈置允許通過路由路徑及其相應的元件來傳輸屬性。

在源文件夾中，創建一個名為“pages”的新目錄部分，然後合併兩個名為“Dashboard.jsx”和“About.jsx”的新文件。利用這些文件來試驗各種路線。

使用createBrowserRouter定義路由

React Router 的文檔 建議使用 createBrowserRouter 組件來定義 React Web 應用程序的路由配置。該組件是 BrowserRouter 的輕量級替代品，它採用路由數組作為其參數。

合併此元素消除了在應用程序組件中定義路由的要求。可以在 index.jsx 或 main.jsx 文件中建立所有路由配置。

當然，這裡是該語句的精煉版:scss例如，讓我們考慮一種使用此元素的場景:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
  {
    path: "/dashboard",
    element: <Dashboard/>,
  },
  {
    path: "/about",
    element: <About/>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
); 

使用 createBrowserRouter 和 RouterProvider 組件有助於在基於 React 的應用程序中建立路由基礎設施，利用它們的功能有效地指導用戶在程序的各種互連頁面或功能中進行導航。

在此特定實現中，與傳統方法存在區別，在傳統方法中，BrowserRouter 組件封裝了整個應用程序。相反，RouterProvider 組件用於通過其提供將 Router 上下文傳送到軟件內的每個組成部分。

實現未找到頁面的路由

React Router 的 Route 組件上下文中的 path 屬性的功能在於它能夠在指定路徑和當前 URL 之間進行比較，最終目標是確定它們是否對齊以實現成功導航發生。

為了解決沒有可用路由匹配的情況，可以建立專門管理“404 Page Not Found”錯誤的指定路徑。通過合併這樣的路由，最終用戶在嘗試訪問無效 URL 的情況下可以獲得可理解的答复。

為了將 404 路由合併到應用程序中，您必須將其包含在 RouteComponent 中，如下所示:

 // using the Route component
<Route path="*" element={<NotFound />} />

 // using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

我們將創建一個自定義的“NotFound”組件，它擴展了 React 的內置“NotFoundRouteComponent”。然後，當在服務器上找不到請求的頁面時，我們將使用此組件進行渲染。為了實現這一點，我們首先需要安裝 Axios 來發出 API 請求並使用 CSS 模塊設計我們的組件。最後，我們將在代碼中導入並使用這些包。

星號 (*) 用作正則表達式中任何字符的佔位符，允許它在沒有特定路由與給定 URL 匹配時容納實例。

使用 useNavigate Hook 進行編程導航

“useNavigate”鉤子的使用提供了一種在軟件應用程序中管理導航的有用方法。特別是，當與用戶發起的操作或事件（包括按鈕按下和表單提交）結合進行導航時，該掛鉤被證明是有利的。

事實上，我們必須從受人尊敬的 React Router 包中獲取 useNavigate 鉤子，以便通過 About.jsx 功能組件的實現來促進導航操作。

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

將用戶界面元素合併到應用程序佈局中，該元素在激活後會將用戶重定向到指定路徑。

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

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>//Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

需要注意的是，儘管 useNavigate 鉤子和 useNavigation 鉤子（兩者都是在 React Router 版本 6 中引入的）具有相似的命名約定，但它們具有不同的功能和用途。

使用useNavigation鉤子可以訪問有關導航的相關信息，包括當前的導航狀態和各種附加細節。此類功能有利於呈現用戶界面組件，例如加載指示器，它提供正在進行的操作的可視化表示。

當然，這裡是所提供示例的精煉版，演示了 useNavigation 掛鉤的實現:

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

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

給定的代碼片段演示了一個名為“SubmitButton”的 React 功能組件，它利用“useNavigation”自定義 Hook 來獲取當前導航狀態。這使得按鈕的標籤能夠動態更新，以響應用戶與應用程序交互的變化。

儘管它們的功能不同，但可以同時使用“useNavigate”和“useNavigation”鉤子。前者充當導航過程的啟動機制，而後者提供對實時導航數據的訪問，該數據確定要在瀏覽器環境中顯示的用戶界面反饋的類型。

使用 useRoutes 鉤子

本鉤子能夠以全面的方式指定路線路徑及其相關組件，從而促進匹配路線並因此顯示相關組件的過程。

當然，這裡有一個優雅的插圖展示了該實用程序的使用:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

路由對象充當 URL 及其在應用程序中相應組件之間的中介。通過利用此對象，應用程序組件可以利用通過定義的路由建立的匹配過程成功地將當前 URL 映射到其各自的組件。

利用此功能，您可以精確管理路由架構，從而促進針對您的特定應用程序需求開發定制的路由處理機制。

在 React 應用程序中處理路由

React 本質上並不提供管理應用程序內導航的解決方案；然而，React Router 是專門為滿足這一需求而設計的，它提供了一套全面的路由組件和功能，有助於創建高度響應和直觀的界面。通過利用這些功能，開發人員能夠構建具有無縫導航功能的應用程序，同時確保最佳的用戶體驗。