首頁 > web前端 > js教程 > 主體

BrowserRouter如何配合react-router伺服器

亚连
發布: 2018-06-14 15:39:20
原創
2696 人瀏覽過

這篇文章主要介紹了詳解react-router 4.0 下伺服器如何配合BrowserRouter,現在分享給大家,也給大家做個參考。

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

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

, , ,

其中元件在記憶體中保存「URL」訊息,不會修改瀏覽器的網址欄,往往用於React Native或測試環境等非瀏覽器環境。

元件從名字能看出它從不修改路由,這在伺服器端渲染時很有用。

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

都可以實現前端路由的功能,區別是前者基於rul的pathname段,後者基於hash段。

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

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

這樣的區別帶來的直接問題就是當處於二級或多級路由狀態時,刷新頁面,會將當前路由發送到伺服器(因為是pathname),而不會(因為是hash段)。

我們當然不希望前端路由被傳送到後台。

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

注意: 使用 hash 的方式記錄導航歷史不支援 location.key 和 location.state。在先前的版本中,我們為這種行為提供了 shim,但仍有一些問題我們無法解決。任何依賴此行為的程式碼或外掛程式都將無法正常使用。由於該技術僅用於支援傳統的瀏覽器,因此在用於瀏覽器時可以使用 取代。

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

修改的想法就是當收到請求的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檔案沒有執行。

在查看firebug時發現此次刷新的回應頭中設定了"Connection":"keep-alive";

覺得問題應該出在這裡,換用nodejs用200狀態配合keep-alive果然解決了問題。

在react-router 4.0 多層級路由下重新整理頁面不會再404,而是儲存了前端狀態。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

React Native有關跨域資源出錯問題

#在nodejs中安裝最新版npm(詳細教學)

在js中如何實作函數去抖動(詳細教學)

#在vue-scroller中如何標記記錄滾動位置

微信小程式審核沒通過該怎麼解決?

使用swiper如何改變滑動內容(詳細教學)

#使用Vue.js 2.0如何實作背景影片登入頁面

#

以上是BrowserRouter如何配合react-router伺服器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板