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

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)的直接問(wèn)題就是當(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èn)題我們無(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文件沒(méi)有執(zhí)行。

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

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

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

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