react-router作為react框架路由解決方案在react專案中舉足輕重。本文主要介紹了詳解react-router 4.0 下伺服器如何配合BrowserRouter,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
在react-router 4.0版本中,API與先前版本相比有了很大的修改,在2.0、3.0中常用的
其中
而
前者:http://127.0.0.1:3000/article/num1
後者:http://127.0.0.1:3000/#/article/num1(不一定是這樣,但#是少不了的)
這樣的區別帶來的直接問題就是當處於二級或多級路由狀態時,刷新頁面,
我們當然不希望前端路由被傳送到後台。
在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-router HashRouter與BrowserRouter的使用方法分享
react-router browserHistory刷新頁面404問題如何解決
以上是react-router 4.0 下伺服器如何配合BrowserRouter實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!