React多級路由懶加載問題


React啟用懶加載后,react-router使用BrowserRoute模式,二級路由頁面加載其他頁面時會報錯“找不到相應的chunk文件”。

如頁面demo/A中懶加載demo/B,會報錯“react-dom.development.js:13035 Uncaught ChunkLoadError: Loading chunk B failed.”。查看network請求發現懶加載B時的js請求路徑為demo/B/js/chunkName.js,而webpack打包后的統一放在了路徑dist/js下,故找不到對應的chunkName.js。

 

解決方法:

1.將react-router的模式改為HashRouter,由於采用#hash來實現路由,請求的chunkName.js路徑永遠在/js路徑下。

2.修改webpack的output參數,添加publicPath屬性為“/”,這樣所有的資源引用都將使用絕對引用方式,在多級路由下也能正常工作。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM