React Router 6 快速上手

来源:https://www.cnblogs.com/wml-it/archive/2023/08/24/17653220.html
-Advertisement-
Play Games

## 1.概述 1. React Router 以三個不同的包發佈到 npm 上，它們分別為： 1. react-router: 路由的核心庫，提供了很多的：組件、鉤子。 2. **react-router-dom:** 包含react-router所有內容，並添加一些專門用於 DOM 的組件，例如 ...


1.概述

  1. React Router 以三個不同的包發佈到 npm 上，它們分別為：

    1. react-router: 路由的核心庫，提供了很多的：組件、鉤子。
    2. react-router-dom: 包含react-router所有內容，並添加一些專門用於 DOM 的組件，例如 <BrowserRouter>等 。
    3. react-router-native: 包括react-router所有內容，並添加一些專門用於ReactNative的API，例如:<NativeRouter>等。

  2. 與React Router 5.x 版本相比，改變了什麼？

    1. 內置組件的變化：移除<Switch/> ，新增 <Routes/>等。

    2. 語法的變化：component={About} 變為 element={<About/>}等。

    3. 新增多個hook：useParams、useNavigate、useMatch等。

    4. 官方明確推薦函數式組件了！！！

      ......

2.Component

1. <BrowserRouter>

  1. 說明：<BrowserRouter> 用於包裹整個應用。

  2. 示例代碼：

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

ReactDOM.render(
  <BrowserRouter>
    {/* 整體結構（通常為App組件） */}
  </BrowserRouter>,root
);

2. <HashRouter>

  1. 說明：作用與<BrowserRouter>一樣，但<HashRouter>修改的是地址欄的hash值。
  2. 備註：6.x版本中<HashRouter>、<BrowserRouter> 的用法與 5.x 相同。

3. <Routes/> 與 <Route/>

  1. v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。

  2. <Routes> 和 <Route>要配合使用，且必須要用<Routes>包裹<Route>。

  3. <Route> 相當於一個 if 語句，如果其路徑與當前 URL 匹配，則呈現其對應的組件。

  4. <Route caseSensitive> 屬性用於指定：匹配時是否區分大小寫（預設為 false）。

  5. 當URL發生變化時，<Routes> 都會查看其所有子 <Route> 元素以找到最佳匹配並呈現組件 。

  6. <Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通過 <Outlet> 組件來渲染其子路由。

  7. 示例代碼：

    <Routes>
    /*path屬性用於定義路徑，element屬性用於定義當前路徑所對應的組件*/
    <Route path="/login" element={<Login />}></Route>

		/*用於定義嵌套路由，home是一級路由，對應的路徑/home*/
    <Route path="home" element={<Home />}>
       /*test1 和 test2 是二級路由,對應的路徑是/home/test1 或 /home/test2*/
      <Route path="test1" element={<Test/>}></Route>
      <Route path="test2" element={<Test2/>}></Route>
		</Route>
	
		//Route也可以不寫element屬性, 這時就是用於展示嵌套的路由 .所對應的路徑是/users/xxx
    <Route path="users">
       <Route path="xxx" element={<Demo />} />
    </Route>
</Routes>

  1. 作用: 修改URL，且不發送網路請求（路由鏈接）。

  2. 註意: 外側需要用<BrowserRouter>或<HashRouter>包裹。

  3. 示例代碼：

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

function Test() {
  return (
    <div>
    	<Link to="/路徑">按鈕</Link>
    </div>
  );
}

  1. 作用: 與<Link>組件類似，且可實現導航的“高亮”效果。

  2. 示例代碼：

    // 註意: NavLink預設類名是active，下麵是指定自定義的class

//自定義樣式
<NavLink
    to="login"
    className={({ isActive }) => {
        console.log('home', isActive)
        return isActive ? 'base one' : 'base'
    }}
>login</NavLink>

/*
	預設情況下，當Home的子組件匹配成功，Home的導航也會高亮，
	當NavLink上添加了end屬性後，若Home的子組件匹配成功，則Home的導航沒有高亮效果。
*/
<NavLink to="home" end >home</NavLink>

6. <Navigate>

  1. 作用：只要<Navigate>組件被渲染，就會修改路徑，切換視圖。

  2. replace屬性用於控制跳轉模式（push 或 replace，預設是push）。

  3. 示例代碼：

    import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'

export default function Home() {
	const [sum,setSum] = useState(1)
	return (
		<div>
			<h3>我是Home的內容</h3>
			{/* 根據sum的值決定是否切換視圖 */}
			{sum === 1 ? <h4>sum的值為{sum}</h4> : <Navigate to="/about" replace={true}/>}
			<button onClick={()=>setSum(2)}>點我將sum變為2</button>
		</div>
	)
}

7. <Outlet>

  1. 當<Route>產生嵌套時，渲染其對應的後續子路由。

  2. 示例代碼：

    //根據路由表生成對應的路由規則
const element = useRoutes([
  {
    path:'/about',
    element:<About/>
  },
  {
    path:'/home',
    element:<Home/>,
    children:[
      {
        path:'news',
        element:<News/>
      },
      {
        path:'message',
        element:<Message/>,
      }
    ]
  }
])

//Home.js
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

export default function Home() {
	return (
		<div>
			<h2>Home組件內容</h2>
			<div>
				<ul className="nav nav-tabs">
					<li>
						<NavLink className="list-group-item" to="news">News</NavLink>
					</li>
					<li>
						<NavLink className="list-group-item" to="message">Message</NavLink>
					</li>
				</ul>
				{/* 指定路由組件呈現的位置 */}
				<Outlet />
			</div>
		</div>
	)
}

3.Hooks

1. useRoutes()

  1. 作用：根據路由表，動態創建<Routes>和<Route>。

  2. 示例代碼：

    //路由表配置：src/routes/index.js
import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'

export default [
	{
		path:'/about',
		element:<About/>
	},
	{
		path:'/home',
		element:<Home/>
	},
	{
		path:'/',
		element:<Navigate to="/about"/>
	}
]

//App.jsx
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'

export default function App() {
	//根據路由表生成對應的路由規則
	const element = useRoutes(routes)
	return (
		<div>
			......
      {/* 註冊路由 */}
      {element}
		  ......
		</div>
	)
}

2. useNavigate()

  1. 作用：返回一個函數用來實現編程式導航。

  2. 示例代碼：

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

export default function Demo() {
  const navigate = useNavigate()
  const handle = () => {
    //第一種使用方式：指定具體的路徑
    navigate('/login', {
      replace: false,
      state: {a:1, b:2}
    }) 
    //第二種使用方式：傳入數值進行前進或後退，類似於5.x中的 history.go()方法
    navigate(-1)
  }
  
  return (
    <div>
      <button onClick={handle}>按鈕</button>
    </div>
  )
}

3. useParams()

  1. 作用：回當前匹配路由的params參數，類似於5.x中的match.params。

  2. 示例代碼：

    import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
import User from './pages/User.jsx'

function ProfilePage() {
  // 獲取URL中攜帶過來的params參數
  let { id } = useParams();
}

function App() {
  return (
    <Routes>
      <Route path="users/:id" element={<User />}/>
    </Routes>
  );
}

4. useSearchParams()

  1. 作用：用於讀取和修改當前位置的 URL 中的查詢字元串。

  2. 返回一個包含兩個值的數組，內容分別為：當前的seaech參數、更新search的函數。

  3. 示例代碼：

    import React from 'react'
import {useSearchParams} from 'react-router-dom'

export default function Detail() {
	const [search,setSearch] = useSearchParams()
	const id = search.get('id')
	const title = search.get('title')
	const content = search.get('content')
	return (
		<ul>
			<li>
				<button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>點我更新一下收到的search參數</button>
			</li>
			<li>消息編號：{id}</li>
			<li>消息標題：{title}</li>
			<li>消息內容：{content}</li>
		</ul>
	)
}

5. useLocation()

  1. 作用：獲取當前 location 信息，對標5.x中的路由組件的location屬性。

  2. 示例代碼：

    import React from 'react'
import {useLocation} from 'react-router-dom'

export default function Detail() {
	const x = useLocation()
	console.log('@',x)
  // x就是location對象: 
	/*
		{
      hash: "",
      key: "ah9nv6sz",
      pathname: "/login",
      search: "?name=zs&age=18",
      state: {a: 1, b: 2}
    }
	*/
	return (
		<ul>
			<li>消息編號：{id}</li>
			<li>消息標題：{title}</li>
			<li>消息內容：{content}</li>
		</ul>
	)
}

6. useMatch()

  1. 作用：返回當前匹配信息，對標5.x中的路由組件的match屬性。

  2. 示例代碼：

    <Route path="/login/:page/:pageSize" element={<Login />}/>
<NavLink to="/login/1/10">登錄</NavLink>

export default function Login() {
  const match = useMatch('/login/:x/:y')
  console.log(match) //輸出match對象
  //match對象內容如下：
  /*
  	{
      params: {x: '1', y: '10'}
      pathname: "/LoGin/1/10"  
      pathnameBase: "/LoGin/1/10"
      pattern: {
      	path: '/login/:x/:y', 
      	caseSensitive: false, 
      	end: false
      }
    }
  */
  return (
  	<div>
      <h1>Login</h1>
    </div>
  )
}

7. useInRouterContext()

​ 作用：如果組件在 <Router> 的上下文中呈現，則 useInRouterContext 鉤子返回 true，否則返回 false。

8. useNavigationType()

  1. 作用：返回當前的導航類型（用戶是如何來到當前頁面的）。
  2. 返回值：POP、PUSH、REPLACE。
  3. 備註：POP是指在瀏覽器中直接打開了這個路由組件（刷新頁面）。

9. useOutlet()

  1. 作用：用來呈現當前組件中渲染的嵌套路由。

  2. 示例代碼：

    const result = useOutlet()
console.log(result)
// 如果嵌套路由沒有掛載,則result為null
// 如果嵌套路由已經掛載,則展示嵌套的路由對象

10.useResolvedPath()

  1. 作用：給定一個 URL值，解析其中的：path、search、hash值。

本文來自博客園，作者：碼農阿亮，轉載請註明原文鏈接：https://www.cnblogs.com/wml-it/p/17653220.html

技術的發展日新月異，隨著時間推移，無法保證本博客所有內容的正確性。如有誤導，請大家見諒，歡迎評論區指正！
開源庫地址,歡迎點亮:
GitHub：https://github.com/ITMingliang
Gitee：   https://gitee.com/mingliang_it
GitLab： https://gitlab.com/ITMingliang
建群聲明： 本著技術在於分享，方便大家交流學習的初心，特此建立【編程內功修煉交流群】，為大家答疑解惑。熱烈歡迎各位愛交流學習的程式員進群，也希望進群的大佬能不吝分享自己遇到的技術問題和學習心得！進群方式：掃碼關註公眾號，後臺回覆【進群】。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Ubuntu虛擬機安裝以及在Ubuntu上安裝pycharm
    操作系統是電腦不可或缺的一部分，它連接著硬體和應用程式。內核是操作系統的核心，負責管理進程和線程、記憶體、硬體設備以及提供系統調用介面。電腦啟動過程中，ROM負責載入並執行BIOS程式，而RAM用於存儲運行中的程式和數據。系統調用是操作系統提供給應用程式的介面，通過系統調用可以訪問操作系統的功能。... ...
  • 讀SQL學習指南（第3版）筆記05_過濾
    ![](https://img2023.cnblogs.com/blog/3076680/202308/3076680-20230822120346228-1599813347.png) # 1. 不需要考慮排除任何列 ## 1.1. 清除數據表中所有的內容 ## 1.2. 暫存新數據倉庫的數據 # ...
  • 大型集團企業數據治理方案，以“應用驅動”的數據治理策略 | 行業方案
    [數據治理](https://www.dtstack.com/?src=szsm)是推動大型集團企業轉型升級、提升競爭優勢、實現高質量發展的重要引擎。 通過搭建[大數據平臺](https://www.dtstack.com/?src=szsm)，實現對業務系統數據的採集、清理、建模、整合，建立一個符 ...
  • DP報Script failed. Cannot get information from remote host案例
    HP DP(Data Protector Manager)上一個剛剛遷移升級的資料庫備份作業失敗，具體失敗信息如下 .................................RMAN-08503: piece handle=c-1684727642-20230822-00 comment=A ...
  • Android NDK基礎介紹及例子
    # [TOC] [Android開發中的NDK到底是什麼？(詳細解析+案例) - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/415536928) # NDK介紹 **(1)簡介** **定義：**`Native Development Kit`，是 ` ...
  • Android 記憶體管理
    我司存在記憶體為1G RAM的設備，屬於低記憶體設備，經常會出現記憶體很緊張的場景，也容易因此導致一系列七七八八的邊際問題，故有必要瞭解Android系統的記憶體相關知識： 1. 瞭解記憶體的分配、回收方式 2. 瞭解OOM、LMK的相關機制 3. 瞭解Android系統記憶體相關調試方式 4. 瞭解Andro... ...
  • Vue3 中 keepAlive 如何搭配 VueRouter 來更自由的控制頁面的狀態緩存?
    在 vue 中,預設情況下，一個組件實例在被替換掉後會被銷毀。這會導致它丟失其中所有已變化的狀態——當這個組件再一次被顯示時，會創建一個只帶有初始狀態的新實例。但是 vue 提供了 keep-alive 組件,它可以將一個動態組件包裝起來從而實現組件切換時候保留其狀態。本篇文章要介紹的並不是它的基本 ...
  • 【小程式分包】小程式包大於2M，來這教你分包啊
    小程式超出大小，分包載入步驟 1.查看項目結構 2.分析主包大小 3.查閱參考文檔 4.結構調整 5.修改pages.json ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類