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或測試環境等非瀏覽器環境。

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

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

<BrowserRouter>

<BrowserRouter>和<HashRouter>都可以實現前端路由的功能，區別是前者基於rul的pathname段，后者基於hash段。

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

　　后者：http://127.0.0.1:3000/#/article/num1（不一定是這樣，但#是少不了的）

這樣的區別帶來的直接問題就是當處於二級或多級路由狀態時，刷新頁面，<BrowserRouter>會將當前路由發送到服務器（因為是pathname），而<HashRouter>不會（因為是hash段）。

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

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

　　注意： 使用 hash 的方式記錄導航歷史不支持 location.key 和 location.state。 在以前的版本中，我們為這種行為提供了 shim，但是仍有一些問題我們無法解決。 任何依賴此行為的代碼或插件都將無法正常使用。 由於該技術僅用於支持傳統的瀏覽器，因此在用於瀏覽器時可以使用 <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文件沒有執行。

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

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

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