react路由問題

BrowserRouter會(huì)導(dǎo)致刷新找不到路徑

服務(wù)器Nginx配置

采用Nginx方案需要先將所有資源打包生成到對(duì)應(yīng)的目錄,比如dist,然后做如下配置:

server{server_namereact.thinktxt.com;listen80;root/Users/txBoy/WEB-Project/React-Demo/dist;indexindex.html;location/{try_files$uri/index.html;}}

通過配置Nginx,訪問任何URI都指向index.html,瀏覽器上的path,會(huì)自動(dòng)被React-router處理,進(jìn)行無刷新跳轉(zhuǎn)。


Node服務(wù)端配置

一個(gè)express應(yīng)用的配置示例:

constexpress=require('express');constpath=require('path');constport=process.env.PORT||8080;constapp=express();//加載指定目錄靜態(tài)資源app.use(express.static(__dirname+'/dist'))//配置任何請(qǐng)求都轉(zhuǎn)到index.html,而index.html會(huì)根據(jù)React-Router規(guī)則去匹配任何一個(gè)routeapp.get('*',function(request,response){response.sendFile(path.resolve(__dirname,'dist','index.html'))})app.listen(port,function(){console.log("server started on port "+port)})

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容