无法解析符号 'Routes'

Question

我正在按以下方式导入路由

import {Routes, Route, BrowserRouter} from 'react-router-dom'

我的包裹JSON是"react-router-dom": "^6.0.2",

我正在使用 Pycharm。

npm list react-router-dom returns -- react-router-dom@6.0.2

为什么会这样？我的前端是空白的。

Answer 1

我们可以尝试删除 node_modules 并删除该文件夹。然后我们可以运行 npm 这将再次重新安装这些软件包。

之后，我会尝试实现 Router 并查看它是否自行解决，即使它抱怨找不到符号。

像这样的东西应该可以工作：

<BrowserRouter>
  <Routes>
    <Route path='/*' element={ <App /> } />
  </Routes>
</BrowserRouter>

Answer 2

我刚刚在 WebStorm 中遇到了同样的问题。当我在 import 语句中对 'react-router-dom' 进行 crtl-click 时，我看到它似乎对要注意哪个 index.ts.d 文件感到困惑。正如预期的那样，一个来自安装在我的项目 node_modules 中的 6.0.2 版本。另一个在 C:\Users[me]\AppData\Local\JetBrains\WebStorm2021.2\javascript\typings\react-router-dom.3.2\node_modules@types\react-router-dom\index.d.ts.

我刚刚从 5.3.2 重命名了后者的 JetBrains 文件，认为它现在已经过时了，此后它按预期工作。这不是最漂亮的解决方案，而且我只是基本确定它以后不会找到一种方法来咬我的屁股。但至少现在，它是有效的。

Answer 3

我解决了黑屏，是因为版本问题所以我不得不根据https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md更改代码，但我仍然有一个警告“无法解析符号'Routes'”我' m 使用最新版本的 Webstrom。

import React from "react";
import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";

const  App = () => {
  return(
    <Router>
      <Header />
      <main className='py-3'>
          <Container>
              <Routes>
                  <Route exact path="/" element={<HomeScreen />}/>
              </Routes>
          </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

Answer 4

当我升级到react-router-dom:6.0.2.

正如 @DLH 所述，Jetbrains 产品 从 <system directory>/jetbrains/intellij/javascript/typings 而不是从 读取程序包的类型文件 项目的 node_modules 文件夹。

正如来自 Jetbrains 的 Oksana Chumak 所说：

The IDE downloads typings for some popular libraries to its configuration folder and uses them to enhance code completion.

解法：

在jetbrains产品里面，按shift两次打开到处搜索window，搜索registry 并打开第一个结果。

在注册表中，查找 typescript.external.type.defintions.packages 键并在该字段的 value 中， 仅从值中删除 react-router-dom 字段。

同时删除 react-router-dom包文件夹，<system directory>/users/{name}/AppData/Local/jetbrains/intellij/javascript/typings

现在，jetbrains 产品 将从项目的 node_modules 中读取类型文件，而不是从其internal typings folder。以后也不会尝试下载 intellij react-router-dom typings用于其他项目。

Answer 5

您必须为包安装 Typescript 存根

您有两个选择：

使用 IDE

将光标放在导入语句中的“react-router-dom”上
按 Alt+Enter
选择安装 TypeScript 定义以获得更好的类型信息

用 npm 安装它

在您的项目中打开 cmd
npm 安装@types/react-router-dom

不要忘记从首选项中删除 IDE 库 |语言与框架 | JavaScript |图书馆，如果您使用选项 1

无法解析符号 'Routes'

Cannot resolve symbol 'Routes'

jsx

pycharm

reactjs

解法：