外传系列-各种疑难杂症

记录一下实现过程中遇到的一些坑。

单页面应用路由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 " > [email protected]" has unmet peer dependency "history@^4.7.2".
warning " > [email protected]" has incorrect peer dependency "react-redux@^6.0.0".
warning " > [email protected]" 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 [email protected]后再编译，世界终于清静了。