當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

react-router的使用（一）——URL的hash、HTML5的history、Router的基本使用

發布時間：2024/7/5 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 react-router的使用（一）——URL的hash、HTML5的history、Router的基本使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、階段一：后端路由階段

早期的網站開發整個HTML頁面是由服務器來渲染的.
服務器直接生產渲染好對應的HTML頁面, 返回給客戶端進行展示.

但是, 一個網站, 這么多頁面服務器如何處理呢?

一個頁面有自己對應的網址, 也就是URL.
URL會發送到服務器, 服務器會通過正則對該URL進行匹配, 并且最后交給一個Controller進行處理.
Controller進行各種處理, 最終生成HTML或者數據, 返回給前端.
這就完成了一個IO操作.

上面的這種操作, 就是后端路由.

當我們頁面中需要請求不同的路徑內容時, 交給服務器來進行處理, 服務器渲染好整個頁面, 并且將頁面返回給客戶頓.
這種情況下渲染好的頁面, 不需要單獨加載任何的js和css, 可以直接交給瀏覽器展示, 這樣也有利于SEO的優化.

后端路由的缺點:

一種情況是整個頁面的模塊由后端人員來編寫和維護的.
另一種情況是前端開發人員如果要開發頁面, 需要通過PHP和Java等語言來編寫頁面代碼.
而且通常情況下HTML代碼和數據以及對應的邏輯會混在一起, 編寫和維護都是非常糟糕的事情

二、階段二：前后端分離階段

前端渲染的理解：

每次請求涉及到的靜態資源都會從靜態資源服務器獲取；
這些資源包括HTML+CSS+JS，然后在前端對這些請求回來的資源進行渲染；
需要注意的是，客戶端的每一次請求，都會從靜態資源服務器請求文件；
同時可以看到，和之前的后斷路由不同，這時后端只是負責提供API了；

前后端分離階段：

隨著Ajax的出現, 有了前后端分離的開發模式；
后端只提供API來返回數據，前端通過Ajax獲取數據，并且可以通過JavaScript將數據渲染到頁面中；
這樣做最大的優點就是前后端責任的清晰，后端專注于數據上，前端專注于交互和可視化上；
并且當移動端(iOS/Android)出現后，后端不需要進行任何處理，依然使用之前的一套API即可；
目前很多的網站依然采用這種模式開發（jQuery開發模式）；

三、階段三：單頁面富應用（SPA）

單頁面富應用的理解：

單頁面富應用的英文是single-page application，簡稱SPA；
整個Web應用只有實際上只有一個頁面，當URL發生改變時，并不會從服務器請求新的靜態資源；
而是通過JavaScript監聽URL的改變，并且根據URL的不同去渲染新的頁面；

如何可以應用URL和渲染的頁面呢？前端路由

前端路由維護著URL和渲染頁面的映射關系；
路由可以根據不同的URL，最終讓我們的框架（比如Vue、React、Angular）去渲染不同的組件；
最終我們在頁面上看到的實際就是渲染的一個個組件頁面；

四、前端路由的原理

前端路由是如何做到URL和內容進行映射呢？監聽URL的改變。
URL發生變化，同時不引起頁面的刷新有兩個辦法：

通過URL的hash改變URL；
通過HTML5中的history模式修改URL；

當監聽到URL發生變化時，我們可以通過自己判斷當前的URL，決定到底渲染什么樣的內容。

五、URL的hash

URL的hash

URL的hash也就是錨點(#), 本質上是改變window.location的href屬性；
我們可以通過直接賦值location.hash來改變href, 但是頁面不發生刷新；

注意：
? hash的優勢就是兼容性更好，在老版 IE中都可以運行；
? 但是缺陷是有一個#，顯得不像一個真實的路徑；

六、HTML5的history

history接口是HTML5新增的, 它有六種模式改變URL而不刷新頁面：

replaceState：替換原來的路徑；
pushState：使用新的路徑；
popState：路徑的回退；
go：向前或向后改變路徑；
forward：向前改變路徑；
back：向后改變路徑；

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><a href="/home">首頁</a><a href="/about">關于</a><div class="router-view"></div></div><script>// 1.獲取router-view的DOMconst routerViewEl = document.getElementsByClassName("router-view")[0];// 獲取所有的a元素, 自己來監聽a元素的改變const aEls = document.getElementsByTagName("a");for (let el of aEls) {el.addEventListener("click", e => {e.preventDefault();const href = el.getAttribute("href");history.pushState({}, "", href);urlChange();})}// 執行返回操作時, 依然來到urlChangewindow.addEventListener('popstate',urlChange);// 監聽URL的改變function urlChange() {switch (location.pathname) {case "/home":routerViewEl.innerHTML = "首頁";break;case "/about":routerViewEl.innerHTML = "關于";break;default:routerViewEl.innerHTML = "";}}</script></body> </html>

七、react-router

目前前端流行的三大框架, 都有自己的路由實現:

Angular的ngRouter
React的react-router
Vue的vue-router

React Router的版本4開始，路由不再集中在一個包中進行管理了：

react-router是router的核心部分代碼；
react-router-dom是用于瀏覽器的；
react-router-native是用于原生應用的；

目前我們使用最新的React Router版本是v5的版本：

實際上v4的版本和v5的版本差異并不大；

安裝react-router：

安裝react-router-dom會自動幫助我們安裝react-router的依賴；

yarn add react-router-dom

八、Router的基本使用

react-router最主要的API是給我們提供的一些組件：

BrowserRouter或HashRouter

Router中包含了對路徑改變的監聽，并且會將相應的路徑傳遞給子組件；
BrowserRouter使用history模式；
HashRouter使用hash模式；

Link和NavLink：

通常路徑的跳轉是使用Link組件，最終會被渲染成a元素；
NavLink是在Link基礎之上增加了一些樣式屬性（后續學習）；
to屬性：Link中最重要的屬性，用于設置跳轉到的路徑；

Route：

Route用于路徑的匹配；
path屬性：用于設置匹配到的路徑；
component（v5）/ element（v6）屬性：設置匹配到路徑后，渲染的組件；
exact：精準匹配，只有精準匹配到完全一致的路徑，才會渲染對應的組件；

import React, {PureComponent} from 'react'; import {BrowserRouter, Link, Route, Routes} from "react-router-dom"; import Home from "./pages/home"; import About from "./pages/about"; import Profile from "./pages/profile";class App extends PureComponent {render() {return (<div><BrowserRouter><Link to='/'>首頁</Link><Link to='/about'>關于</Link><Link to='/profile'>我的</Link><Routes><Route exact path='/' element={<Home/>}/><Route path='/about' element={<About/>}/><Route path='/profile' element={<Profile/>}/></Routes></BrowserRouter></div>);} }export default App;