React Router路由组件渲染报错：ERR_OSSL_EVP_UNSUPPORTED如何解决？

你安装react-router-dom后启动React项目时出现的error:0308010C:digital envelope routines::unsupported错误，本质是Node.js 17及以上版本默认启用OpenSSL 3.0，而旧版webpack或react-scripts使用的哈希算法不再被支持导致的。以下是几种可行的解决方法：

方法一：临时启动项目 #

在启动命令前添加环境变量，强制使用旧的哈希算法：

• Windows（命令提示符）：

  set NODE_OPTIONS=--openssl-legacy-provider && npm start
  

• Windows（PowerShell）：

  $env:NODE_OPTIONS="--openssl-legacy-provider"; npm start
  

• Mac/Linux：

  NODE_OPTIONS=--openssl-legacy-provider npm start
  

方法二：永久修改启动脚本 #

直接修改项目根目录的package.json，给start和build命令添加环境变量，一劳永逸：

Windows用户： #

"scripts": {
  "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
  "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Mac/Linux用户： #

"scripts": {
  "start": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
  "build": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

修改后保存，直接执行npm start即可正常启动。

方法三：升级依赖版本 #

如果不想用兼容模式，直接升级到修复该问题的依赖版本：

• 升级react-scripts到v5.0.0及以上：

  npm install react-scripts@latest
  

• 若项目直接使用webpack，升级到v5.60.0及以上：

  npm install webpack@latest
  

方法四：降级Node.js版本 #

如果上述方案都不适用，可以将Node.js降级到16.x或更低版本，使用nvm（Node版本管理器）可方便切换不同版本的Node.js。

内容的提问来源于stack exchange，提问作者Akhil Singh