BrowserRouter如何配合react-router伺服器
- 亚连原創
- 2018-06-14 15:39:202729瀏覽
這篇文章主要介紹了詳解react-router 4.0 下伺服器如何配合BrowserRouter，現在分享給大家，也給大家做個參考。
react-router作為react框架路由解決方案在react專案中舉足輕重。
在react-router 4.0版本中，API與先前版本相比有了很大的修改，在2.0、3.0中常用的a7f2cf15f06fbef780c6b2609731da81組件作為路由底層配置組件不再常用，取而代之的是四個各有不同的路由元件：
6177ae8eed0322e277a7e6c21878d6d7, 4915f05e1fd45774514682b289f54a27, ab736354b76d127562077b87d19fcb68, 918422798e26d25f6fed3e9f4a3226eb
其中ab736354b76d127562077b87d19fcb68元件在記憶體中保存「URL」訊息，不會修改瀏覽器的網址欄，往往用於React Native或測試環境等非瀏覽器環境。
而918422798e26d25f6fed3e9f4a3226eb元件從名字能看出它從不修改路由，這在伺服器端渲染時很有用。
4915f05e1fd45774514682b289f54a27組件我們最為熟悉的路由組件不用再多贅述，這裡來說說我在使用react-router推薦的6177ae8eed0322e277a7e6c21878d6d7時遇到的坑。
6177ae8eed0322e277a7e6c21878d6d7
6177ae8eed0322e277a7e6c21878d6d7和4915f05e1fd45774514682b289f54a27都可以實現前端路由的功能，區別是前者基於rul的pathname段，後者基於hash段。
前者：http://127.0.0.1:3000/article/num1
後者：http://127.0.0.1:3000/#/article/num1（不一定是這樣，但#是少不了的）
這樣的區別帶來的直接問題就是當處於二級或多級路由狀態時，刷新頁面，6177ae8eed0322e277a7e6c21878d6d7會將當前路由發送到伺服器（因為是pathname），而4915f05e1fd45774514682b289f54a27不會（因為是hash段）。
我們當然不希望前端路由被傳送到後台。
在react-router 4.0 的文檔中有這樣一段話：
注意： 使用 hash 的方式記錄導航歷史不支援 location.key 和 location.state。在先前的版本中，我們為這種行為提供了 shim，但仍有一些問題我們無法解決。任何依賴此行為的程式碼或外掛程式都將無法正常使用。由於該技術僅用於支援傳統的瀏覽器，因此在用於瀏覽器時可以使用 e39972b58835f779f5cb270543abb76e 取代。
這就要求伺服器要配合前端做一些簡單的修改。
修改的想法就是當收到請求的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，而是儲存了前端狀態。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是BrowserRouter如何配合react-router伺服器的詳細內容。更多資訊請關注PHP中文網其他相關文章！