react-router-dom入門使用教程(前端路由原理)

更新時(shí)間：2022年08月10日 15:06:11 作者：codeMak1r.小新

這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關(guān)理解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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ù)都需要通過ajax請(qǐng)求獲取，并在前端異步展現(xiàn)。

?? 路由的理解

1. 什么是路由？

一個(gè)路由就是一個(gè)映射關(guān)系（key:value）

key為路徑，value可能是function 或 component

2. 路由分類

后端路由：

理解：value是 function ，用來處理客戶端提交的請(qǐng)求。
注冊(cè)路由：router.get(path, function(request,response))
工作過程：當(dāng)node 接收到一個(gè)請(qǐng)求時(shí)，根據(jù)請(qǐng)求路徑找到匹配的路由，調(diào)用路由中的函數(shù)來處理請(qǐng)求，返回響應(yīng)數(shù)據(jù)。

前端路由：

瀏覽器端路由，value 是 component，用于展示頁(yè)面內(nèi)容；
注冊(cè)路由：<Router path="/test” component={Test}>
工作過程：當(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)。

重要是事情說三遍。

每當(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)來的 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)聽路由發(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ù)
專門用來實(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)：（編寫路由鏈接）
點(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)切換組件—-編寫路由鏈接 */}
              <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>
    )
  }
}

這么寫的話腳手架會(huì)報(bào)一個(gè)錯(cuò)誤：

原因是，要在<NavLink>標(biāo)簽以及<Route>標(biāo)簽外面用<Router>標(biāo)簽包裹起來。
我們可以在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)簽包裹起來，這樣就不會(huì)有報(bào)錯(cuò)啦。

?? 一般組件與路由組件

路由組件與一般組件的不同：

路由組件放在 pages 文件夾中，一般組件放在 components 文件夾中；

路由組件使用：

import Home from './pages/Home'  // Home是路由組件
<Route path="/home" component={Home} />

一般組件使用：

import Header from './components/Header'  // Header是一般組件
<Header />

一般組件只要沒傳遞props，那么組件的內(nèi)部的this.props就一定為空。

哪怕沒給路由組件傳遞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)單一匹配，也就是說，/home路徑匹配到Home組件之后就不會(huì)再向下繼續(xù)匹配了。這樣的好處是，提高了路由匹配效率，如果不添加 Switch 標(biāo)簽，react路由會(huì)同一個(gè)路徑查找多次，但是添加了 Switch 標(biāo)簽后，react路由只要查找到第一個(gè)與路徑匹配的組件（如本例中的Home組件）就會(huì)結(jié)束查找，提高效率。

到此這篇關(guān)于react-router-dom入門使用教程的文章就介紹到這了,更多相關(guān)react-router-dom內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: