react-router-dom入門(mén)使用教程(前端路由原理)
React路由相關(guān)理解
?? SPA的理解
單頁(yè)WEB應(yīng)用（single page web application , SPA）。整個(gè)應(yīng)用只有一個(gè)完整的頁(yè)面。點(diǎn)擊頁(yè)面的鏈接不會(huì)刷新頁(yè)面，只會(huì)做頁(yè)面的局部更新數(shù)據(jù)都需要通過(guò)ajax請(qǐng)求獲取，并在前端異步展現(xiàn)。
?? 路由的理解
1. 什么是路由？
一個(gè)路由就是一個(gè)映射關(guān)系（key:value）
key為路徑，value可能是function 或 component
2. 路由分類(lèi)
后端路由：
- 理解：value是 function ，用來(lái)處理客戶端提交的請(qǐng)求。
- 注冊(cè)路由：router.get(path, function(request,response))
- 工作過(guò)程：當(dāng)node 接收到一個(gè)請(qǐng)求時(shí)，根據(jù)請(qǐng)求路徑找到匹配的路由，調(diào)用路由中的函數(shù)來(lái)處理請(qǐng)求，返回響應(yīng)數(shù)據(jù)。
前端路由：
- 瀏覽器端路由 ，value 是 component，用于展示頁(yè)面內(nèi)容；
- 注冊(cè)路由：<Router path="/test” component={Test}>
- 工作過(guò)程：當(dāng)瀏覽器的 path 變?yōu)?/test時(shí)，當(dāng)前路由組件就會(huì)變?yōu)?Test 組件
?? 前端路由原理（重點(diǎn)）
前端路由依靠的是瀏覽器的BOM對(duì)象中的history，也就是瀏覽器的歷史記錄（history）。
但我們一般不直接操作BOM身上的history，而是借助history.js去操作BOM。
history模式的路由：
<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script> <script type="text/javascript"> let history = History.createBrowserHistory() //方法一，直接使用H5推出的history身上的API </script>
hash模式的路由：（地址欄中帶有 # 號(hào)）
<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script> <script type="text/javascript"> let history = History.createHashHistory() //方法二，hash值（錨點(diǎn)） </script>
瀏覽器的歷史記錄（history）是一個(gè)棧的結(jié)構(gòu)。
瀏覽器的歷史記錄（history）是一個(gè)棧的結(jié)構(gòu)。
瀏覽器的歷史記錄（history）是一個(gè)棧的結(jié)構(gòu)。
重要是事情說(shuō)三遍。
每當(dāng)執(zhí)行push操作時(shí)，都是將path推入棧頂，瀏覽器也自動(dòng)顯示棧頂?shù)膬?nèi)容。
function push(path) { // path：/test1
history.push(path)
return false
}
此時(shí)棧中有著至少兩條數(shù)據(jù)，棧底是：localhost:5500,棧頂是剛剛push進(jìn)來(lái)的 localhost:5500/test1
瀏覽器會(huì)顯示棧頂路徑對(duì)應(yīng)的路由界面。
執(zhí)行瀏覽器的回退操作其實(shí)就是將棧頂?shù)?“/test1”出棧。
而執(zhí)行replace操作時(shí)，是將目前棧頂?shù)脑靥鎿Q。
function replace(path) { // path: /test2
history.replace(path)
}
若原棧頂是 /test1，執(zhí)行replace后則將棧頂?shù)?/test1替換為 /test2，且顯示的是 /test2 的路由界面。
監(jiān)聽(tīng)路由發(fā)生變化
history.listen(location => {
console.log('請(qǐng)求路由路徑變化了', location)
})
路由實(shí)現(xiàn)頁(yè)面回退（將棧頂元素出棧）
history.goBack()
路由實(shí)現(xiàn)頁(yè)面前進(jìn)（將棧外元素推入棧頂）
history.goForward()
react-router-dom@5
- react的一個(gè)插件庫(kù)
- 專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)一個(gè)SPA應(yīng)用
- 基于 React 的項(xiàng)目基本都會(huì)用到此庫(kù)。
下載react-router-dom
npm install react-router-dom@5 yarn add react-router-dom@5
??注意，本文講解的是react-router-dom@5.3.3版本
?? 基本路由使用
要實(shí)現(xiàn)圖中案例，首先要先實(shí)現(xiàn)：（編寫(xiě)路由鏈接）
點(diǎn)擊按鈕實(shí)現(xiàn)路徑跳轉(zhuǎn)（也就是點(diǎn)擊About，路徑變?yōu)椋簂ocalhost:3000/about）
然后實(shí)現(xiàn)：（注冊(cè)路由）
路徑變化后自動(dòng)匹配響應(yīng)的路由組件。（也就是路徑為：/about時(shí)，自動(dòng)匹配About組件）
import React, { Component } from 'react'
import { NavLink, Route } from 'react-router-dom'
import Home from './pages/Home' // Home是路由組件
import About from './pages/About' // About是路由組件
import Header from './components/Header' // Header是一般組件
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header />
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 原生html中靠<a>跳轉(zhuǎn)不同的頁(yè)面 */}
{/* <a href="./about.html" rel="external nofollow" className="list-group-item">About</a>
<a href="./home.html" rel="external nofollow" className="list-group-item">Home</a> */}
{/* 在React中靠路由鏈接實(shí)現(xiàn)切換組件—-編寫(xiě)路由鏈接 */}
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注冊(cè)路由 */}
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
</div>
</div>
</div>
</div>
</div>
)
}
}
這么寫(xiě)的話腳手架會(huì)報(bào)一個(gè)錯(cuò)誤：
原因是，要在<NavLink>標(biāo)簽以及<Route>標(biāo)簽外面用<Router>標(biāo)簽包裹起來(lái)。
我們可以在index.js中完成這個(gè)需求：
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);
將整個(gè)App組件用Router標(biāo)簽包裹起來(lái)，這樣就不會(huì)有報(bào)錯(cuò)啦。
?? 一般組件與路由組件
路由組件與一般組件的不同：
路由組件放在 pages 文件夾中，一般組件放在 components 文件夾中；
路由組件使用：
import Home from './pages/Home' // Home是路由組件
<Route path="/home" component={Home} />一般組件使用：
import Header from './components/Header' // Header是一般組件 <Header />
一般組件只要沒(méi)傳遞props，那么組件的內(nèi)部的this.props就一定為空。
哪怕沒(méi)給路由組件傳遞props屬性，路由組件內(nèi)部的this.props并不為空。
原因是：路由組件會(huì)收到路由器自動(dòng)傳遞給路由組件的props。
?? 路由API：Switch提高路由匹配效率（單一匹配）
不加switch：
<div className="panel-body">
{/* 注冊(cè)路由 */}
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
<Route path='/home' component={Demo} />
</div>
注冊(cè)路由時(shí)，不使用switch，兩個(gè)組件同時(shí)匹配/home路徑。
此時(shí)兩個(gè)組件內(nèi)容都會(huì)展示。
原因是：
注冊(cè)路由時(shí)，與路徑相匹配的路由組件都會(huì)展示，都會(huì)一一匹配。
使用switch：
<div className="panel-body">
{/* 注冊(cè)路由 */}
<Switch>
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
<Route path='/home' component={Demo} />
</Switch>
</div>
注冊(cè)路由時(shí)，在外圍包裹一組 Switch 標(biāo)簽，可以讓路由實(shí)現(xiàn)單一匹配，也就是說(shuō)，/home路徑匹配到Home組件之后就不會(huì)再向下繼續(xù)匹配了。這樣的好處是，提高了路由匹配效率，如果不添加 Switch 標(biāo)簽，react路由會(huì)同一個(gè)路徑查找多次，但是添加了 Switch 標(biāo)簽后，react路由只要查找到第一個(gè)與路徑匹配的組件（如本例中的Home組件）就會(huì)結(jié)束查找，提高效率。
到此這篇關(guān)于react-router-dom入門(mén)使用教程的文章就介紹到這了,更多相關(guān)react-router-dom內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Redux的工作流程,redux是一個(gè)專(zhuān)門(mén)用于做狀態(tài)管理的JS庫(kù)，它可以在react、angular、vue等項(xiàng)目中，但基本與react配合使用，需要的朋友可以參考下2022-08-08
react項(xiàng)目中@路徑簡(jiǎn)單配置指南
這篇文章主要給大家介紹了關(guān)于react項(xiàng)目中@路徑簡(jiǎn)單配置的相關(guān)資料,文中還介紹了React配置@路徑別名的方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能(完整代碼)
最近在做一個(gè)后臺(tái)管理項(xiàng)目，涉及到react相關(guān)知識(shí)，項(xiàng)目需求需要在表單中帶附件提交，怎么實(shí)現(xiàn)這個(gè)功能呢？下面小編給大家?guī)?lái)了react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能，一起看看吧2021-06-06
這篇文章主要介紹了React組件通信,在開(kāi)發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2023-03-03
用React實(shí)現(xiàn)一個(gè)完整的TodoList的示例代碼
本篇文章主要介紹了用React實(shí)現(xiàn)一個(gè)完整的TodoList的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要為大家介紹了React useState的錯(cuò)誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
利用React-router+Webpack快速構(gòu)建react程序
目前 React、Webpack 等技術(shù)如火如荼，你是不是還在愁苦如何把這些雜亂的知識(shí)怎么學(xué)習(xí)一下，開(kāi)啟一段新的前端開(kāi)發(fā)之路呢？那么這篇將給大家運(yùn)用示例代碼詳細(xì)的介紹使用React-router和Webpack如何快速構(gòu)建一個(gè)react程序，感興趣的朋友們下面來(lái)一起看看吧。2016-10-10
react實(shí)現(xiàn)移動(dòng)端二級(jí)路由嵌套詳解
這篇文章主要介紹了react移動(dòng)端二級(jí)路由嵌套的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例
這篇文章主要為大家介紹了React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
雖然一直有做react相關(guān)的優(yōu)化,按需加載、dll 分離、服務(wù)端渲染,但是從來(lái)沒(méi)有從路由代碼分割這一塊入手過(guò),所以下面這篇文章主要給大家介紹了關(guān)于React中代碼分割的方式,需要的朋友可以參考下2022-12-12