項目中多數使用react單頁面開發,路由使用react-router的browser-router,這樣頁面訪問路徑看起來像是真實的,如http://xx.xxx.xxx/a/b。但當項目訪問路徑為多級時,直接輸入地址或刷新會報404。這是因為服務器會將其當做真實的路徑去請求頁面,但實際這個頁面是不存在的,所以會報404錯誤。解決方法是讓其請求到項目入口頁面,由js去處理路由加載響應模塊。
假如項目為A,入口文件為A/view/index.html,訪問地址如 http://test.x431.com/A/view/login。在Nginx加如下配置。
1 location ~* view { 2 rewrite (.+)/view/(.+)$ $1/view/index.html break; 3 }
參考文檔:
http://nphard.me/2016/03/07/nginx-for-react/
http://www.cnblogs.com/feiyuanxing/p/4668818.html