初学react - 使用@withRouter 报错的解决

朱雀 2021-08-27 15:32 415阅读 0赞

### 报错：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1] ###

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

### 解决方案： ###

先运行 `npm run eject` 将默认隐藏的项目暴露出来，然后在 `package.json` 文件的 `babel` 对象里加入以下代码：

"plugins": [
          [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
          ]
        ]

即：

"babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
          [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
          ]
        ]
      }

注意点：如果本地有已修改的代码，需要先将本地的代码存入远程仓库或者先存入临时存储中或者 运行一次 npm install / npm install react-scripts，不然运行 npm run eject 会报错。

[npm run eject报错的解决方案链接][npm run eject]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200323101734751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]: /images/20210813/fa9c5a0431a145bf93a7e91fca98c0dc.png
[npm run eject]: https://blog.csdn.net/LiaoFengJi/article/details/95044427