react-router-dom 中缺少交换机和路由器模块

Posted 2023-02-22

【中文标题】react-router-dom 中缺少交换机和路由器模块

【英文标题】：Switch and Router modules missing from react-router-dom

【发布时间】：2020-07-24 17:16:43

【问题描述】：

我的问题的标题说明了一切。我一直在尝试使用 react-router-dom 创建一个包含多个“页面”的 React 应用程序。基本上我所做的是提示“npx create-react-app”，创建一些 JS 页面文件只是为了测试这个东西并提示“npm install react-router-dom”。没有别的了。

现在，当我尝试从 react-router-dom 导入 Switch 模块时，我的 IDE（我正在使用 Jetbrains Webstorm）找不到依赖项。我已经手动检查了 node_modules 的模块文件夹中缺少的依赖项，并且依赖项确实不存在。

我已经阅读了几个关于 react-router-dom 的教程，但没有人说 Switch 被弃用或类似的东西，所以事实并非如此。

我不知道任何其他信息是否会有所帮助，但请随时指出，以防我可以提供更多信息。任何帮助将不胜感激。

我的 package.json 看起来像这样：

  "name": "react-router-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

【问题讨论】：

能否请您添加您的 package.json？，看看您使用的是哪个版本的 react 和 react 路由器？还有您的 Switch 导入的代码 sn-p

可能包含node_modules 文件夹的屏幕截图。

当然，我已经在原始问题中添加了 package.json 文件。至于导入，一个简单的“import Switch from 'react-router-dom'”是不可能的，因为我在 react-router-dom 上找不到“Switch”。

你有没有得到关于这个我遇到同样问题的答案。

【参考方案1】：

这是一个 WebStorm IDE 问题，不是 react-router-dom 的问题； Switch 组件工作正常，是 WebStorm 无法找到依赖项。

你提到了

我已经手动检查了 node_modules 的模块文件夹中缺少的依赖项，并且依赖项确实不存在。

但是如果你在 node_modules/react-router-dom 中检查 Switch.js 文件确实存在。

您可以尝试this 回答中概述的步骤（它适用于 phpStorm，但也适用于 WebStorm）。

对我来说它不起作用，所以我将不得不忍受 IDE 警告。

请注意，如果从 react-router 而不是 react-router-dom 导入 Switch，问题就会消失：

import 
    BrowserRouter as Router,
    Route
 from 'react-router-dom';

import Switch from 'react-router'

因为，根据link“react-router-dom 重新导出所有 react-router 的导出”，可能是这种重新导出让 WebStorm 感到困惑。