欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter

 更新時(shí)間:2017年12月29日 10:33:19   作者:YZH_chengdu  
這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

react-router作為react框架路由解決方案在react項(xiàng)目中舉足輕重。

在react-router 4.0版本中,API與先前版本相比有了很大的修改,在2.0、3.0中常用的<Router>組件作為路由底層配置組件不再常用,取而代之的是四個(gè)各有不同的路由組件:

<BrowserRouter>, <HashRouter>, <MemoryRouter>, <StaticRouter>

其中<MemoryRouter>組件在內(nèi)存中保存“URL”信息,不會(huì)修改瀏覽器的地址欄,往往用于React Native或測(cè)試環(huán)境等非瀏覽器環(huán)境。

而<StaticRouter>組件從名字能看出它從不修改路由,這在服務(wù)器端渲染時(shí)很有用。

<HashRouter>組件我們最為熟悉的路由組件不用再多贅述,這里來(lái)說(shuō)說(shuō)我在使用react-router推薦的<BrowserRouter>時(shí)遇到的坑。

<BrowserRouter>

<BrowserRouter>和<HashRouter>都可以實(shí)現(xiàn)前端路由的功能,區(qū)別是前者基于rul的pathname段,后者基于hash段。

前者:http://127.0.0.1:3000/article/num1

后者:http://127.0.0.1:3000/#/article/num1(不一定是這樣,但#是少不了的)

這樣的區(qū)別帶來(lái)的直接問題就是當(dāng)處于二級(jí)或多級(jí)路由狀態(tài)時(shí),刷新頁(yè)面,<BrowserRouter>會(huì)將當(dāng)前路由發(fā)送到服務(wù)器(因?yàn)槭莗athname),而<HashRouter>不會(huì)(因?yàn)槭莌ash段)。

我們當(dāng)然不希望前端路由被發(fā)送到后臺(tái)。

在react-router 4.0 的文檔中有這樣一段話:

注意: 使用 hash 的方式記錄導(dǎo)航歷史不支持 location.key 和 location.state。 在以前的版本中,我們?yōu)檫@種行為提供了 shim,但是仍有一些問題我們無(wú)法解決。 任何依賴此行為的代碼或插件都將無(wú)法正常使用。 由于該技術(shù)僅用于支持傳統(tǒng)的瀏覽器,因此在用于瀏覽器時(shí)可以使用 <BrowserHistory> 代替。

這就要求服務(wù)器要配合前端做一些簡(jiǎn)單的修改。

修改的思想就是當(dāng)收到請(qǐng)求的url不是功能性的,而是前端路由時(shí),重新加載入口html文件(我的后臺(tái)是nodejs)。

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  //判斷是主動(dòng)導(dǎo)向404頁(yè)面,還是傳來(lái)的前端路由。
   //如果是前端路由則如下處理

  fs.readFile(__dirname + '/public/dist/index.html', function(err, data){
    if(err){
      console.log(err);
      res.send('后臺(tái)錯(cuò)誤');
    } else {
      res.writeHead(200, {
        'Content-type': 'text/html',
        'Connection':'keep-alive'
      });
      res.end(data);
    }
  })
});

此處踩坑無(wú)數(shù),在網(wǎng)上搜索方法后換用nginx,使用try_files字段定向到入口html,但是重定向后,webpack打包的js文件沒有執(zhí)行。

在查看firebug時(shí)發(fā)現(xiàn)此次刷新的響應(yīng)頭中設(shè)置了"Connection":"keep-alive";

覺得問題應(yīng)該出在這里,換用nodejs用200狀態(tài)配合keep-alive果然解決了問題。

在react-router 4.0 多級(jí)路由下刷新頁(yè)面不會(huì)再404,而是保存了前端狀態(tài)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 如何在react項(xiàng)目中做公共配置文件

    如何在react項(xiàng)目中做公共配置文件

    這篇文章主要介紹了如何在react項(xiàng)目中做公共配置文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 基于react封裝一個(gè)通用可編輯組件

    基于react封裝一個(gè)通用可編輯組件

    前段時(shí)間接到這樣一個(gè)需求,需要封裝一個(gè)組件實(shí)現(xiàn)可編輯,這個(gè)到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,所以本文將給大家介紹如何基于react封裝一個(gè)通用可編輯組件,需要的朋友可以參考下
    2024-02-02
  • React Router V6更新內(nèi)容詳解

    React Router V6更新內(nèi)容詳解

    這篇文章主要為大家介紹了React Router V6更新內(nèi)容,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-12-12
  • React中memo useCallback useMemo方法作用及使用場(chǎng)景

    React中memo useCallback useMemo方法作用及使用場(chǎng)景

    這篇文章主要為大家介紹了React中三個(gè)hooks方法memo useCallback useMemo的作用及使用場(chǎng)景示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2023-03-03
  • react 可拖拽進(jìn)度條的實(shí)現(xiàn)

    react 可拖拽進(jìn)度條的實(shí)現(xiàn)

    本文主要介紹了react 可拖拽進(jìn)度條的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • React?Streaming?SSR原理示例深入解析

    React?Streaming?SSR原理示例深入解析

    這篇文章主要為大家介紹了React?Streaming?SSR原理示例深入解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • React如何自定義輪播圖Carousel組件

    React如何自定義輪播圖Carousel組件

    這篇文章主要介紹了React如何自定義輪播圖Carousel組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 深入理解React?State?原理

    深入理解React?State?原理

    本文主要介紹了React?State?原理,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解

    React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解

    React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁(yè)面的方式,用于已登錄或具有訪問特定頁(yè)面所需的權(quán)限,這篇文章就來(lái)記錄下React實(shí)現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下
    2024-07-07
  • React樣式?jīng)_突解決問題的方法

    React樣式?jīng)_突解決問題的方法

    本文主要介紹了React樣式?jīng)_突解決問題的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03

最新評(píng)論