使用 React-Router 創(chuàng)建單頁應(yīng)用

nifhlheimr 發(fā)布于2019-08-20 11:56 / 3307人閱讀

摘要：在單頁應(yīng)用開發(fā)中，并不是必須的，所以今天只講講前端的路由系統(tǒng)以及的簡單使用。當(dāng)頁面狀態(tài)發(fā)生變化時，相應(yīng)變化，重新加載時又可以通過中攜帶的直接將頁面設(shè)置到對應(yīng)的狀態(tài)。此時可以使用來設(shè)置一個默認(rèn)頁面。

最近業(yè)余時間在學(xué)習(xí) React，配合 Redux 和 React-Router 正在不緊不慢地開發(fā)一個小工具moviemaster，用于管理硬盤中的電影劇集。在單頁應(yīng)用開發(fā)中，redux 并不是必須的，所以今天只講講前端的路由系統(tǒng)以及 React-Router的簡單使用。

什么是路由

以下來自維基百科：：

路由（routing）就是通過互聯(lián)的網(wǎng)絡(luò)把信息從源地址傳輸?shù)侥康牡刂返幕顒印Ｂ酚砂l(fā)生在OSI網(wǎng)絡(luò)參考模型中的第三層即網(wǎng)路層。
路由引導(dǎo)分組轉(zhuǎn)送，經(jīng)過一些中間的節(jié)點后，到它們最后的目的地。

這是網(wǎng)絡(luò)工程中的術(shù)語，對大家而言，最熟悉的應(yīng)該就是家里的路由器。路由是指路由器從一個接口上收到數(shù)據(jù)包，根據(jù)數(shù)據(jù)包的目的地址進(jìn)行定向并轉(zhuǎn)發(fā)到另一個接口的過程。放在 Web 上來說，url 就像是路由器中的路由表，每個 url 對應(yīng)不同的頁面或者內(nèi)容，就像路由表中的的 IP 對應(yīng)不同的網(wǎng)絡(luò)一樣。

先來看一下熟悉的套路：

在傳統(tǒng)的網(wǎng)頁應(yīng)用架構(gòu)中，客戶端只是一個展示層，通過 url 訪問服務(wù)端，服務(wù)端則根據(jù)自己的“路由表”將對應(yīng)的頁面分發(fā)給客戶端。但是在這種模式下，ajax 異步加載的內(nèi)容是無法通過url 記錄的。無論你在頁面上操作了多少，異步請求了多少數(shù)據(jù)，在每次重新訪問同一個 url 時，服務(wù)端返回給客戶端的內(nèi)容都是一模一樣。

如果前端有自己專屬的“路由表”來分發(fā)頁面上不同的狀態(tài)，那不就行了？

Hash 和 pushState

據(jù)我所知，目前有兩種方式可以構(gòu)建出前端的路由系統(tǒng)：url 中的#和 HTML5中的 history API。其原理如下：

阻止標(biāo)簽的默認(rèn)跳轉(zhuǎn)動作。

ajax或者 Fetch 請求內(nèi)容。

將返回的內(nèi)容添加到頁面中。

使用 hash 或者 pushState 修改 url。

經(jīng)典的 Hash

#代表網(wǎng)頁中的一個位置。后面接著的字符，就是該位置的標(biāo)識符。比如，

https://zhanglun.github.io/index.html#body

就代表網(wǎng)頁 index.html 的 body 位置。瀏覽器讀取這個 URL 后，會自動將body位置滾動至可視區(qū)域。標(biāo)識符的指定有兩個方法。

使用錨點

使用id屬性

#是用來指向文檔的內(nèi)容，屬于瀏覽器的行為，與服務(wù)端無關(guān)，在 HTTP請求中也不會攜帶 #及其后面的內(nèi)容，對于服務(wù)端而言 http://www.baidu.com 和 http://www.baidu.com#action=fuckbaidu 返回給客戶端的都是前者所分發(fā)的內(nèi)容，但是在瀏覽器中可以通過 Window 對象上的 location.hash 進(jìn)行操作。因此，在瀏覽器中可以通過 hash 來記錄頁面的狀態(tài)，構(gòu)建“路由表”。當(dāng)頁面狀態(tài)發(fā)生變化時，hash 相應(yīng)變化，重新加載時又可以通過 url 中攜帶的 hash 直接將頁面設(shè)置到對應(yīng)的狀態(tài)。

比如：

http://www.example.com/
http://www.examplt.com/#edit
http://www.examplt.com/#settings

訪問/時，呈現(xiàn)主頁。

點擊頁面上的Edit按鈕，頁面呈現(xiàn)編輯對應(yīng)的內(nèi)容。通過 url 直接訪問時，檢查 hash 是否和 edit 匹配，如果匹配執(zhí)行加載編輯內(nèi)容的代碼

點擊頁面上的Settings按鈕，頁面呈現(xiàn)設(shè)置對應(yīng)的內(nèi)容。通過 url 直接訪問時，檢查 hash 是否和 settings 匹配，如果匹配執(zhí)行加載編輯內(nèi)容的代碼。

以下是偽代碼：

  function hashHandler () {
    let key = location.hash.slice(1);
    switch(key) {
      case "edit":
        renderEditPanel();
        break;
      case "settings":
        renderSettings();
        break;
       default:
        break;
    }
  }
  window.onload = () => {
    hashHandler();
  }
  window.onhashchange = () => {
    hashHandler();
  }

HTML5 中的 pushState

pushState是 History API中的一個方法，其文檔可以看這里 MDN History。它的功能簡單的說就是：修改 url，添加歷史記錄。比如/blogs和settings對應(yīng)的是兩個頁面，如果只是在頁面上點擊標(biāo)簽切換，需要做的操作只有：發(fā)送請求修改頁面內(nèi)容和調(diào)用 pushState 方法修改 url。問題來了，對于前端而言需要將其視為同一個頁面，但實際上這兩個 url 對于服務(wù)端來說是兩個不同的請求，所以這里需要服務(wù)端的配合。

我的做法是：對應(yīng)的url 返回的都是同一個頁面，然后瀏覽器接受之后檢查前端定義路由系統(tǒng)，執(zhí)行響應(yīng)的代碼。這個方法可能會造成頁面平白添加一個短暫的延遲，不過影響不是很大。

React-Router的使用

目前來說，任何一個路由系統(tǒng)庫或者框架，雖說是寫法不一，但是都是在上述兩種方式的基礎(chǔ)上實現(xiàn)的。讓我覺得耳目一新的是：使用路由嵌套的概念來定義 view 的嵌套集合，當(dāng)一個給定的 URL 被調(diào)用時，整個集合中（命中的部分）都會被渲染。

import React from "react";
import { render } from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";

import App from "./containers/App";
import MovieContainer from "./containers/Movies";
import Detail from "./containers/Detail";


let rootElement = document.getElementById("app");
render(
  
    
      
      
        
      
    
  ,
rootElement);

在入口文件中，引入 React-Router，以組件的形式在 render 中使用，上述代碼配置結(jié)果如下：

URL	組件
/	App
/about	App -> About
/inbox	App -> Inbox
/inbox/messages/:id	App -> Inbox -> Message

在路由中，組件對應(yīng)設(shè)置的子組件可以通過 this.props.children 渲染在父組件中

class App extend Component {
  constructor(props) {
    super(props)
  }
  render() {
    
      Hello, world!
      {this.props.children}
    
  }
}

當(dāng) URL 為 / 時， App 中并沒有渲染任何的組件，render 中的 this.props.children 還是 undefined。此時可以使用 IndexRoute 來設(shè)置一個默認(rèn)頁面。

render(
  
    
      {/* 當(dāng) url 為/時渲染 Welcome */}
      
      
      
        
      
    
  ,
rootElement);

URL	組件
/	App -> Welcome
/about	App -> About
/inbox	App -> Inbox
/inbox/messages/:id	App -> Inbox -> Message

看一下這一段代碼

此時匹配的路由分別是：/posts，/posts/usres/:userid 和/posts/users/:userid/messages/:messageid，可以看出，嵌套的所匹配的 url是包裹著它的的 path “之和”。但是問題又來了，嵌套的好處在于路由之間結(jié)構(gòu)清晰直觀，但是也會導(dǎo)致 url 的不美觀，試想/posts/users/:userid/messages/:messageid這么長的路由也是著實讓人心累。React-Router 的配置提供了一個選擇：將 Route 的 path 設(shè)置成絕對路徑。同時可以使用將修改為絕對路徑的路由重定向到之前的設(shè)置

URL	組件
/posts	App -> Post
/user/:userid	App -> Post -> User
/messages/:messageid	App -> Post -> User ->Message

基礎(chǔ)的配置完成之后，通過自動或者通過browserHistory和hashHistory手動執(zhí)行路由的跳轉(zhuǎn)。

云服務(wù)器 GPU云服務(wù)器單頁應(yīng)用單頁應(yīng)用cdn 單頁應(yīng)用程序創(chuàng)建應(yīng)用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80713.html

發(fā)表評論

登陸后可評論

0條評論

nifhlheimr

男|高級講師

我要關(guān)注我要私信

TA的文章

頭歌平臺（EduCoder）————軟件測試（黑盒測試)

閱讀 3420·2021-11-24 09:38
使用WebUploader實現(xiàn)圖片上傳

閱讀 3196·2021-11-22 09:34
虛擬主機(jī)技術(shù)是什么意思-什么是虛擬主機(jī)？

閱讀 2112·2021-09-22 16:03
CSS 搞事技巧：border+transparent

閱讀 2373·2019-08-29 18:37
webpack4 + react 搭建多頁面應(yīng)用

閱讀 383·2019-08-29 16:15
如何使頁面交互更流暢

閱讀 1774·2019-08-26 13:56
前端防XSS攻擊——模板字面量（模板字符串）之模板標(biāo)簽的應(yīng)用

閱讀 867·2019-08-26 12:21
小程序input控件

閱讀 2208·2019-08-26 12:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用 React-Router 創(chuàng)建單頁應(yīng)用

Hello, world!

相關(guān)文章

**koa-cola：只需一個react組件，同時支持單頁應(yīng)用(SPA)和服務(wù)器渲染(SSR)**

**分享一個react單頁應(yīng)用腳手架**

【全棧React】第17天: 客戶端路由

指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

? 基于 react + react-router + redux 構(gòu)建的移動端微應(yīng)用

發(fā)表評論

0條評論

nifhlheimr

男|高級講師

TA的文章

頭歌平臺（EduCoder）————軟件測試（黑盒測試)

使用WebUploader實現(xiàn)圖片上傳

虛擬主機(jī)技術(shù)是什么意思-什么是虛擬主機(jī)？

CSS 搞事技巧：border+transparent

webpack4 + react 搭建多頁面應(yīng)用

如何使頁面交互更流暢

前端防XSS攻擊——模板字面量（模板字符串）之模板標(biāo)簽的應(yīng)用

小程序input控件

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用 React-Router 創(chuàng)建單頁應(yīng)用

Hello, world!

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！