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

詳解react-router 4.0 下服務器如何配合BrowserRouter

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

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

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

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

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

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

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

<BrowserRouter>

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

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

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

這樣的區(qū)別帶來的直接問題就是當處于二級或多級路由狀態(tài)時,刷新頁面,<BrowserRouter>會將當前路由發(fā)送到服務器(因為是pathname),而<HashRouter>不會(因為是hash段)。

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

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

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

這就要求服務器要配合前端做一些簡單的修改。

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

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

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

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

在查看firebug時發(fā)現此次刷新的響應頭中設置了"Connection":"keep-alive";

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

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 如何在react項目中做公共配置文件

    如何在react項目中做公共配置文件

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

    基于react封裝一個通用可編輯組件

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

    React Router V6更新內容詳解

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

    React中memo useCallback useMemo方法作用及使用場景

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

    react 可拖拽進度條的實現

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

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

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

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

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

    深入理解React?State?原理

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

    React實現路由鑒權的實例詳解

    React應用中的路由鑒權是確保用戶僅能訪問其授權頁面的方式,用于已登錄或具有訪問特定頁面所需的權限,這篇文章就來記錄下React實現路由鑒權的流程,需要的朋友可以參考下
    2024-07-07
  • React樣式沖突解決問題的方法

    React樣式沖突解決問題的方法

    本文主要介紹了React樣式沖突解決問題的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-03-03

最新評論