react白屏如何解決

本篇內容主要講解“react白屏如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“react白屏如何解決”吧!

react白屏的原因是HtmlWebpackPlugin插件在引入bundle.js時，引入的是相對路徑，其解決辦法：1、在output配置中加入publicPath；2、在history模式下，將historyApiFallback設置為true即可。

react history模式下的白屏問題

近期，再用react的時候,由于不想用丑陋的hash,便將路由模式切換成history了，結果帶來了一些問題，比如刷新白屏，還有圖片加載不出來，這里我們說一下解決方案。

原因

首先，我們說一下造成這一系列現象的原因。

我們在http://localhost:xxxx/這個路徑下去刷新頁面是沒有問題的，一切都顯得那么正常，但是當我們換到一個子模塊，刷新就會白屏，為什么呢？

我們看到，它會從當前路徑下去找bundle.js，為什么？因為HtmlWebpackPlugin插件在幫我們引入bundle.js時，引入的是相對路徑

所以，在刷新時，它是相對于現在的url取尋找的。

解決方案

原因一旦清楚，解決方案便呼之欲出了。我們只要想辦法讓bundle.js的加載路徑在刷新的時候，也從根目錄開始尋找，而不是跟隨當前url即可。

1.output配置加入publicPath

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

publicPath是什么意思呢？官網中有這么一句話

webpack-dev-server 也會默認從 publicPath 為基準，使用它來決定在哪個目錄下啟用服務，來訪問 webpack 輸出的文件。

簡單理解，你的靜態資源，都會從此路徑下開始加載

publicPath: "/"     //加載路徑‘/assets/js/bundle.js’

這樣，每次刷新都會從根目錄開始加載，就不會丟失我們的bundle.js了。圖片加載不出來也是這個問題。

2.webpack-dev-server的historyApiFallback

history模式下，devServer需要配置historyApiFallback為true

devServer: {
historyApiFallback: true
}

注意以上兩點，history模式就能正常使用了。

到此，相信大家對“react白屏如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！