react-router browserHistory刷新页面404问题解决方法

使用React开发新项目时，遇见了刷新页面，直接访问二级或三级路由时，访问失败，出现404或资源加载异常的情况，本篇针对此问题进行分析并总结解决方案。 背景 使用webpack-dev-server做本地开发服务器时，正常情况只需要简单使用webpack-dev-server指令启动即可，但是当项目处于以下两种情况时，往往需要有嵌套路由和异步加载路由： 我们使用react-router这种路由库构建单页面应用路由； 使用html-webpack-plugin插件动态将加载js的[removed]标签注入html文档； 这时，访问localhost:9090是可以正常加载页面和js等文 在使用React开发单页面应用（SPA）时，`react-router`是常见的路由管理库，而`browserHistory`是它提供的一种历史记录管理方式，模仿浏览器的前进、后退功能。然而，当使用`browserHistory`时，遇到刷新页面或者直接访问二级、三级路由时，可能会出现404错误，这是因为服务器没有正确配置处理这些动态路由。 我们来理解问题的根源。`browserHistory`在React Router中创建的是实际的URL路径，如`localhost:9090/posts/92`。当首次加载应用时，`webpack-dev-server`能够处理并返回`index.html`，因为它是入口点，但当直接访问或刷新非根路径时，服务器并不知道如何响应这些动态路由，导致404错误。 在分析问题时，我们需要考虑两个主要方面：`react-router`的前端路由配置和`webpack-dev-server`的服务配置。对于`react-router`，确保路由配置正确无误，例如使用`<Switch>`包裹所有路由，确保只有一条路由匹配成功，避免路由冲突。 对于`webpack-dev-server`，默认情况下它并不支持`browserHistory`，因为它是一个开发服务器，并不处理静态文件的路由。解决这个问题的方法是启用`historyApiFallback`选项。在`webpack.config.js`的`devServer`配置中添加如下代码： ```javascript devServer: { historyApiFallback: true } ``` 这会让服务器在找不到对应的文件时返回`index.html`，使得`react-router`可以接管并解析路由。 然而，如果在`webpack`的`output`配置中设置了`publicPath`（例如，如果你的应用部署在一个子路径下），则需要更复杂的配置。`historyApiFallback`需要一个`rewrites`对象来指定返回`index.html`： ```javascript devServer: { historyApiFallback: { rewrites: [ { from: /^\/$/, to: '/index.html' }, { from: /./, to: '/index.html' } ] } } ``` 以上配置表示，任何没有找到对应文件的请求都将重定向到`index.html`。 如果在生产环境中，使用的是像`Node.js`、`Nginx`或`Apache`这样的服务器，配置会有所不同。例如，在Node.js中，可以使用`express`框架来捕获所有请求并返回`index.html`。在Nginx中，可以配置`try_files`指令，而在Apache中，需要创建`.htaccess`文件并配置重写规则。 解决`react-router browserHistory`刷新页面404问题的关键在于让服务器能够正确处理所有路由请求，无论它们是否对应实际的静态文件。通过配置`webpack-dev-server`的`historyApiFallback`或在生产环境中调整服务器配置，可以确保在刷新页面或直接访问深层路由时，应用能够正常加载和运行。