Cannot resolve symbol 'Routes'

I had the exact same issue of "Cannot Resolve Symbol" for most of the imports in Intellij, when I upgraded to the react-router-dom:6.0.2.

As @DLH stated, the Jetbrains Product was reading the type file for the package from <system directory>/jetbrains/intellij/javascript/typings rather than from the node_modules folder of the project.

As said by Oksana Chumak from Jetbrains:

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

Solution:

1. Inside the jetbrains product, press shift two times to open the search everywhere window, search for registry and open the first result.

2. In the registry, look for typescript.external.type.defintions.packages key and in the value of that field, only remove the react-router-dom field from the values.

3. Also Go to File -> Invalidate Caches -> select "Clear file system cache and Local History" -> click "Invalidate and Restart"

Now, the jetbrains product will read the type file from node_modules of project, rather than reading it from its internal typings folder. In the future, It will also not try to download and use the intellij react-router-dom typings for other projects.

Credits: Props to @Mir-Ismaili and @unfestive chicken for helping out with the third step.

I just had the same problem in WebStorm. When I did the crtl-click over 'react-router-dom' in the import statement, I saw that it seemed to be confused over which index.ts.d file to pay attention to. One was from the 6.0.2 version installed in my project's node_modules as expected. The other was in C:\Users[me]\AppData\Local\JetBrains\WebStorm2021.2\javascript\typings\react-router-dom\5.3.2\node_modules@types\react-router-dom\index.d.ts.

I just renamed the latter JetBrains file from 5.3.2 figuring that it was now obsolete, and it worked as expected thereafter. It's not the prettiest solution, and I'm only mostly sure that it won't find a way to bite me in the rump later. But at least for now, it works.

We can try removing node_modules and deleting that folder. Then we can run npm this will reinstall those packages again.

After that, I would then try implement the Router and see if it resolves itself even though it complains that it can't find the symbol.

Something like this should work:

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

I resolved the blank screen, it was because of the version so I had to change the code based on https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md, but I still have a warning "Cannot resolve symbol 'Routes'"I'm using the latest version of 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;

You have to install Typescript stubs for the package

You have two options:

1. Install it with IDE

• Put cursor on "react-router-dom" in import statement
• hit Alt+Enter
• choose Install TypeScript definitions for better type information

2. Install it with npm

• open cmd at your project
• npm install @types/react-router-dom

Don't forget to remove IDE library from Preferences | Languages & Frameworks | JavaScript | Libraries , if you used option 1

On macOS, a possible solution is this:

In your app bar, press File -> Invalidate Caches -> select "Clear file system cache and Local History" -> click "Invalidate and Restart"