reactjs - Typescript kan inte lösa react-router-dom


Jag försöker använda React Router i en Typescript React-app. Efter att ha kört yarn create react-app my-app --template typescript, som det står i create-react-app-dokumentationen, och installerat @types/react-router-dom ser min package.json ut som följer:

{
  "name": "allpic-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.6",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Min App.tsx består av följande innehåll:

import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link, Route, Switch} from "react-router-dom";

function App() {
  return (
    <Router>
      <Link to="/">
        <h1>Home</h1>
      </Link>
      <Link to="/upload">
        <h1>Upload</h1>
      </Link>
      <Switch>
        <Route path="/">
          <h1>hello world</h1>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

När jag kör yarn start får jag dessa fel:

Module not found: Can't resolve 'react-router-dom' in '/home/max/Projects/allpic/allpic-frontend/src'
/home/max/Projects/allpic/allpic-frontend/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

[Error: ENOENT: no such file or directory, stat '/home/max/.face.icon'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/max/.face.icon'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Som jag sa, detta är ett färskt projekt. Jag har inte gjort något förutom det jag nämnde ovan. Jag försökte felsöka detta problem genom att sätta en brytpunkt på start.js:19, men jag får ingen stacktrace från lyssnaren.

Hur kan jag övervinna detta problem och få min Typescript-app att kompilera och fungera med React Router?

Svar #1

Vänligen installera även det faktiska react-router-dom-biblioteket.

yarn add react-router-dom