Question:

After you jump to the page using BrowserRouter, refreshing the page again will display a 404 error or resource loading exception.

The reason:

When browserHistory is used, the actual URL is created and the initial/request is handled fine, but the response is not correct after a jump route, when the page is refreshed or when the URL is accessed directly.

Solution:

  • By default, the output.publicPath value is not changed, just set the webpack-dev-server historyApiFallback configuration:

devServer: {
  historyApiFallback: true
} 
Copy the code

  • If you modify the output.publicPath value in the WebPack configuration file, then you need to declare the request redirection and configure the historyapIfallback.index value.

// output.publicPath: '/assets/'
historyApiFallback: {
  index: '/assets/'
} 
Copy the code

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

New problems:

Webpack-dev-server hot update is ok, but the page is missing after refreshing the page!

GET http://localhost:8001/home/build.3f74f7aec8.js net::ERR_ABORTED 404 (Not Found)

Refused to apply style from ‘http://localhost:8001/home/bundle.7b2511c3e5.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Solutions:

Webpack.config. js adds the publicPath property

module.exports = { output: { path: path.resolve(__dirname, "build"), filename: "build.[contenthash:10].js", publicPath: "/"}},Copy the code