How to solve react-router browserHistory refresh page 404 problem

When using React to develop a new project, when refreshing the page and directly accessing the secondary or tertiary routing, the access fails and a 404 or resource loading exception occurs. This article analyzes this problem and summarizes the solution. This article mainly introduces the solution to the 404 problem of react-router browserHistory refresh page. It is of great practical value. Friends in need can refer to it. I hope it can help everyone.

Background

When using webpack-dev-server as a local development server, under normal circumstances, you only need to simply use the webpack-dev-server command to start it. However, when the project is in the following two situations, nested routing and asynchronous loading routing are often required:

1. We use a routing library such as react-router to build single-page application routing;

2. Use the html-webpack-plugin plug-in to dynamically inject the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag of loaded js into the html document;

At this time, visit localhost:9090 Pages and js and other files can be loaded normally, but when we need to access the second-level or even third-level routing or refresh the page, such as localhost:9090/posts/92, ​​two situations may occur:

1. Page loading failed and Cannot Get (404) was returned;

2. The service responded, but the html file output by webpack processing was not returned, resulting in the inability to load js resources. Second This situation is as shown in the figure:

So how do we deal with it so that we can access it normally and route each page? The blogger traced the source and solved the problem after searching for document configuration. This article is a summary of the entire problem-solving process.

Analyze the problem

After discovering the problem, we will start to analyze and solve the problem. We judge that this problem is generally caused by two reasons ：

1. react-router front-end configuration;

2. webpack-dev-server service configuration;

react-router

Because front-end routing is easier to identify problems, more convenient for analysis, and more familiar with react-router, so first query the react-router routing library For related configuration information, I found that the document mentioned that when using browserHistory, a real URL will be created and there will be no problem processing the initial/request. However, after jumping to the route, refreshing the page or directly accessing the URL, you will find that it cannot respond correctly. More For information, check the reference document. The document also provides several server configuration solutions:

Node

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
 response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

When using Node as When serving, you need to use the wildcard * to listen to all requests and return the target html document (html referencing the js resource).

Nginx

If you are using nginx server, you only need to use the try_files directive:

server {
 ...
 location / {
  try_files $uri /index.html
 }
}

Apache

If you use the Apache server, you need to create a .htaccess file in the project root directory. The file contains the following content:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

The following are configurations for the server. Unfortunately, we have not introduced the relevant server yet. We just use the built-in service of webpack-dev-server, but we have found the problem. The problem is that the routing request cannot match the returned HTML document, so it is time to find a solution in the webpack-dev-server document.

webpack-dev-server

I have to complain about the official webpack-dev-server document. The blogger has read it several times. , I saw the problem clearly. There are two situations here:

1. output.publicPath is not modified, that is, there is no declared value in the webpack configuration file, which is the default situation;

2. Set output.publicPath to a custom value;

Click here to view the document

Default condition

By default, the output.publicPath value is not modified. You only need to set the historyApiFallback configuration of webpack-dev-server:

##

devServer: {
 historyApiFallback: true
}

If you are using the HTML5 history API you probably need to serve your index.html in place of 404 responses, which can be done by setting historyApiFallback: true

If your application uses HTML5 history API, you may need to use index.html to respond to 404 or problem requests, just set g historyApiFallback: true

Custom value

However, if you have modified output.publicPath in your Webpack configuration, you need to specify the URL to redirect to. This is done using the historyApiFallback.index option

If you modified the output.publicPath value in your webpack configuration file , then you need to declare the request redirection and configure the historyApiFallback.index value.

// output.publicPath: '/assets/'
historyApiFallback: {
 index: '/assets/'
}

Proxy

I found that using the above method does not completely solve my problem. There will always be routing requests. The response was abnormal, so the blogger continued to look for a better solution:

Click here to view the document

The proxy can be optionally bypassed based on the return from a function. The function can inspect the HTTP request, response, and any given proxy options. It must return either false or a URL path that will be served instead of continuing to proxy the request.

代理提供通过函数返回值响应请求方式，针对不同请求进行不同处理，函数参数接收HTTP请求和响应体，以及代理配置对象，这个函数必须返回false或URL路径，以表明如何继续处理请求，返回URL时，源请求将被代理到该URL路径请求。

proxy: {
 '/': {
  target: 'https://api.example.com',
  secure: false,
  bypass: function(req, res, proxyOptions) {
   if (req.headers.accept.indexOf('html') !== -1) {
    console.log('Skipping proxy for browser request.');
    return '/index.html';
   }
  }
 }
}

如上配置，可以监听https://api.example.com域下的/开头的请求（等效于所有请求），然后判断请求头中accept字段是否包含html，若包含，则代理请求至/index.html，随后将返回index.html文档至浏览器。

解决问题

综合以上方案，因为在webpack配置中修改了output.publicPath为/assets/，所以博主采用webpack-dev-server Proxy代理方式解决了问题：

const PUBLICPATH = '/assets/'
...
proxy: {
 '/': {
  bypass: function (req, res, proxyOptions) {
   console.log('Skipping proxy for browser request.')
   return `${PUBLICPATH}/index.html`
  }
 }
}

监听所有前端路由，然后直接返回${PUBLICPATH}/index.html，PUBLICPATH就是设置的output.publicPath值。

另外，博主总是习惯性的声明，虽然不设置该属性也能满足预期访问效果：

historyApiFallback: true

相关推荐：

使用Django实现自定义404，500页面的方法

IDEA导入web项目详解(解决访问的404)

thinkphp制作404跳转页的简单实现方法

The above is the detailed content of How to solve react-router browserHistory refresh page 404 problem. For more information, please follow other related articles on the PHP Chinese website!