记录一下实现过程中遇到的一些坑。
单页面应用路由404
我们使用React Router 来实现路由跳转时，会遇到一个情况，当直接在浏览器里输入对应路由 http://localhost:8080/novels 时，会发现无法正确显示页面，报出404 错误Cannot GET /novels。
究其原因，单页面应用程序(SPA)通常使用一个web浏览器可以访问的索引文件，比如index.html，然后，在HTML5 History API的帮助下（react-router就是基于History API实现的），借助JavaScript处理应用程序中的导航。当用户单击刷新按钮或直接通过输入地址的方式访问页面时，会出现找不到页面的问题，因为这两种方式都绕开了History API，而我们的请求又找不到后端对应的路由，页面返回404错误。
由此而知，我们必须增加服务器相关配置来解决这个问题，开发环境我们可以在 devServer 中增加historyApiFallback: true 设置来开启服务器支持。默认是重新定位到根目录的index.html，我们也可以重新定义自己规则，详细请参考官网文档 historyApiFallback 介绍
产品环境中参考增加中间件 connect-history-api-fallback 来完成服务器端的支持，具体请参考官方文档。
peerDependency同版本依赖
开发过程中安装第三方插件包资源时，经常会出现类似警告，如下图所示：
warning " > connected-react-router@6.4.0" has unmet peer dependency "history@^4.7.2".
warning " > connected-react-router@6.4.0" has incorrect peer dependency "react-redux@^6.0.0".
warning " > connected-react-router@6.4.0" has unmet peer dependency "react-router@^4.3.1 || ^5.0.0".
我们查看connected-react-router的package.json文件可以发现如下的同版本依赖
"peerDependencies": {
"history": "^4.7.2",
"react": "^16.4.0",
"react-redux": "^6.0.0",
"react-router": "^4.3.1 || ^5.0.0",
"redux": "^3.6.0 || ^4.0.0"
},
复习下 Caret Ranges(^)：
- ^1.2.3 := >=1.2.3 <2.0.0
- ^0.2.3 := >=0.2.3 <0.3.0
- ^0.0.3 := >=0.0.3 <0.0.4
- ^1.2.3-beta.2 := >=1.2.3-beta.2 <2.0.0
- ^0.0.3-beta := >=0.0.3-beta <0.0.4
详细请参考The semantic versioner for npm
我们直接执行安装命令添加依赖
yarn add history react-router
可以解决 unmet 的警告
"dependencies": {
"axios": "^0.19.0",
"connected-react-router": "^6.4.0",
"history": "^4.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
可以看到"history": "^4.9.0"和"react-router": "^5.0.1"是满足peerDependency同版本依赖。
而"react-redux": "^7.1.0" 则与connected-react-router中的同版本依赖"react-redux": "^6.0.0"不符，所以要解决此问题，需要安装低于7的react-redux版本才行。
我们删除react-redux后安装yarn add react-redux@6.0.1后再编译，世界终于清静了。
