文章目錄

前言

提示：這里可以添加本文要記錄的大概內(nèi)容：

例如：隨著人工智能的不斷發(fā)展，機(jī)器學(xué)習(xí)這門技術(shù)也越來(lái)越重要，很多人都開(kāi)啟了學(xué)習(xí)機(jī)器學(xué)習(xí)，本文就介紹了機(jī)器學(xué)習(xí)的基礎(chǔ)內(nèi)容。

一、搭建路由

（1）創(chuàng)建項(xiàng)目并安裝所有依賴

? ? ? ? ? npx create-react-app react-router-pro

? ? ? ? ? npm i

（2）安裝最新的ReactRouter包

? ? ? ? ? npm i react-router-dom

（3）啟動(dòng)項(xiàng)目

? ? ? ? ? npm?start

這是我的路由版本信息，下載最新版本即可。

案例：切換一個(gè)可以切換登錄頁(yè)和首頁(yè)的路由系統(tǒng)

1.在路由文件index.js下引入Reater Router中的兩個(gè)組件createBrowserRouter和RouterProvider（其中，createBrowserRouter函數(shù)是用于創(chuàng)建一個(gè)瀏覽器路由器對(duì)象，用來(lái)配置應(yīng)用中的路由；RouterProvider則是一個(gè)組件，它主要是將創(chuàng)建的路由器對(duì)象提供個(gè)整個(gè)應(yīng)用）

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

2.使用createBrowserRouter創(chuàng)建router實(shí)例對(duì)象并且配置路由對(duì)應(yīng)關(guān)系

const router = createBrowserRouter([

? {

? ? path: '/login',

? ? element: <div>我是登錄頁(yè)</div>,

? },

? {

? ? path: '/home',

? ? element: <div>我是首頁(yè)</div>,

? },

])

3.使用RouterProvider組件全局注入router實(shí)例

查看結(jié)果：

二、抽象路由模塊

1.創(chuàng)建好你所需要的頁(yè)面

eg: 這里是簡(jiǎn)單創(chuàng)建了個(gè)首頁(yè)，登錄頁(yè)同下

2.在路由文件router中使用createBrowserRouter創(chuàng)建瀏覽器路由對(duì)象router，配置好各頁(yè)面路徑

3.在全局應(yīng)用入口文件中引入路由并使用RouterProvider注冊(cè)路由，綁定路由router實(shí)例

查看結(jié)果：

三、路由導(dǎo)航跳轉(zhuǎn)

概念：在路由系統(tǒng)中，我們可能需要在多個(gè)路由之間進(jìn)行路由跳轉(zhuǎn)，可能還需要攜帶參數(shù)來(lái)進(jìn)行通信。

聲明式導(dǎo)航

概念：在模板中使用<Link/>組件描述跳到哪里。

語(yǔ)法：通過(guò)給組件的to屬性指定跳轉(zhuǎn)的路由路徑，組件將被渲染為瀏覽器支持可跳轉(zhuǎn)的a鏈接，如果需要傳參的話，那么直接使用字符串拼接的方式來(lái)拼接參數(shù)。

使用場(chǎng)景：一般在菜單欄、后臺(tái)管理左側(cè)菜單欄中等比較常見(jiàn)。

eg:

跳轉(zhuǎn)前：

跳轉(zhuǎn)后：

編程式導(dǎo)航

概念：通過(guò)使用UseNavigate鉤子函數(shù)得到導(dǎo)航方法，在組件中調(diào)用此方法以命令的形式進(jìn)行路由跳轉(zhuǎn)。

語(yǔ)法：通過(guò)調(diào)用navigate()方法傳入地址path實(shí)現(xiàn)跳轉(zhuǎn)

使用場(chǎng)景：一般寫(xiě)在邏輯代碼中，比如點(diǎn)擊按鈕時(shí)要實(shí)現(xiàn)的頁(yè)面跳轉(zhuǎn)等。

eg:

跳轉(zhuǎn)前：

跳轉(zhuǎn)后：

四、導(dǎo)航跳轉(zhuǎn)傳參

serchParams傳參：

使用固定鉤子函數(shù)useSearchParams接收參數(shù)，通過(guò)在path路徑后面拼上字符串來(lái)傳遞參數(shù)。

語(yǔ)法：

navtigate('/home?id=100&name=Zds')? ?//拼接字符串傳遞參數(shù)

const [params] = useSearchParams()? ?//通過(guò)useSearchParams接收參數(shù)

let id = params.get('id')? // 獲取傳遞的參數(shù)

? ?eg:

在登錄頁(yè)login使用“？”拼接字符串傳遞參數(shù)

然后來(lái)到首頁(yè)home使用useSearchParams鉤子函數(shù)接收參數(shù)并引用params.get方法獲取參數(shù)最后再渲染

結(jié)果：點(diǎn)擊登錄頁(yè)的按鈕后跳轉(zhuǎn)到首頁(yè)，傳遞的參數(shù)顯而易見(jiàn)。

Params傳參

使用固定鉤子函數(shù)useParams接收參數(shù)，通過(guò)在path路徑后面直接傳遞參數(shù)。

語(yǔ)法：

 navigate('/login/200')
 const params = useParams()
 const id = params.id

eg:

在首頁(yè)home中，通過(guò)在path后直接拼接參數(shù)的方式來(lái)傳遞參數(shù)

然后來(lái)到路由文件中，在即將跳轉(zhuǎn)的路徑后拼接好參數(shù)

最后來(lái)到登錄頁(yè)面login下使用useParams接收參數(shù)，通過(guò)params傳參方式可直接使用對(duì)象的方法來(lái)獲取所需要的參數(shù)。

結(jié)果：跳轉(zhuǎn)前，點(diǎn)擊按鈕后跳轉(zhuǎn)到登錄頁(yè)面

跳轉(zhuǎn)后：

注意：使用params傳遞的參數(shù)會(huì)顯示在瀏覽器地址欄上

五、嵌套路由配置

1.使用children屬性來(lái)配置路由嵌套關(guān)系

2.使用<Outlet />組件來(lái)配置二級(jí)路由渲染位置

eg:

(1)創(chuàng)建頁(yè)面

（2）配置路由文件

（3）來(lái)到一級(jí)路由文件Layout.js中，通過(guò)聲明式導(dǎo)航來(lái)進(jìn)行路由跳轉(zhuǎn)，使<Outlet />組件來(lái)渲染二級(jí)路由頁(yè)面

結(jié)果：點(diǎn)擊切換二級(jí)board和二級(jí)about，展示相應(yīng)內(nèi)容

六、默認(rèn)二級(jí)路由配置

概念：當(dāng)訪問(wèn)一級(jí)路由時(shí)，二級(jí)路由也能得到渲染，此時(shí)需要在路由文件下將path路徑去除，并設(shè)置index:true的屬性

eg:依據(jù)上文，進(jìn)入路由配置文件中，將path路徑去除，設(shè)置index:true

結(jié)果展示：當(dāng)我們刷新瀏覽器時(shí)，二級(jí)board頁(yè)面直接呈現(xiàn)

來(lái)到Layout一級(jí)路由頁(yè)面，將剛設(shè)置的about頁(yè)面跳轉(zhuǎn)path去除

結(jié)果展示：這時(shí)，我們會(huì)看到兩個(gè)二級(jí)頁(yè)面可以隨意切換

七、404路由配置

場(chǎng)景：當(dāng)用戶在瀏覽器地址欄輸入路徑在整個(gè)路由配置中都找不到對(duì)應(yīng)的path時(shí)，為了用戶更好的體驗(yàn)，我模塊一使用404組件。

實(shí)現(xiàn)步驟：

1.準(zhǔn)備一個(gè)NotFound組件

2.在路由表數(shù)組的末尾，以為*作為路由path配置路由

結(jié)果展示：

八、兩種路由模式

ReactRouter分別由createBrowserRouter和createHsahRouter函數(shù)負(fù)責(zé)創(chuàng)建

history模式

底層原理：history對(duì)象+pushState事件（需要后端協(xié)助）,url表現(xiàn)：url/login

eg:

結(jié)果展示：

hash模式(哈希模式)

底層原理：監(jiān)聽(tīng)hashChange事件（無(wú)需后端支持）,url表現(xiàn)：url/#/login

eg:

結(jié)果展示：

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了React-Router的使用，希望能幫助更多的小伙伴更好的完成項(xiàng)目。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-850613.html

到了這里，關(guān)于React-Router路由基礎(chǔ)篇（簡(jiǎn)單易學(xué)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！