reactjs - What's the difference between `yarn add react-router-dom` and `yarn add @types/react-router-dom`?

Question

Doing

yarn add react-router-dom

fails. The app throws an error on startup and Intellij flags the import from react-router-dom it as an error. But doing

yarn add @types/react-router-dom

works.

All the examples I've found except for one show the first yarn add... command, though. Is this something new with react-router-dom?

I'm using typescript if that makes any difference.

===Edit===

Here is the error message. This is where I found the solution.

/home/dean/src/react/projects/room-reservations-ui_/src/App.tsx
TypeScript error in /home/dean/src/react/projects/room-reservations-ui_/src/App.tsx(5,29):
Could not find a declaration file for module 'react-router-dom'. '/home/dean/src/react/projects/room-reservations-ui_/node_modules/react-router-dom/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-router-dom` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-router-dom';`  TS7016

    3 | import './App.css';
    4 | import Navbar from "./components/Navbar";
  > 5 | import {BrowserRouter} from "react-router-dom";
      |                             ^
    6 | 
    7 | function App() {
    8 |   return (

标签： reactjstypescriptreact-routeryarnpkg

Answer 1

Simply put, @types/react-router-dom contains type definitions. It is intended for use with typescript. you can see more about this here.