Я пытаюсь использовать React Router в приложении Typescript React. После запуска yarn create react-app my-app --template typescript, как сказано в документации create-react-app, и установки @types/react-router-dom мой package.json выглядит следующим образом:
{
"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"
]
}
}
Мой App.tsx состоит из следующего содержания:
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;
При запуске yarn start я получаю следующие ошибки:
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.
Как я уже сказал, это свежий проект. Я не делал ничего, кроме того, что я сказал выше. Я попытался отладить эту проблему, поместив точку останова в start.js:19, но я не получаю никакой трассировки стека от слушателя.
Как я могу преодолеть эту проблему и заставить мое приложение Typescript компилироваться и работать с React Router?
Я также получаю аналогичную ошибку, но не связанную с React. Меня беспокоит не отсутствие модулей, а то, что, черт возьми, ищет .face.icon в моем домашнем каталоге и почему? Я также получаю ENOENT /home/user/.steampath. У кого-нибудь есть идеи, что ищет эти файлы и почему?
Неважно, это часть того, как узел разрешает модули. Оба пути, которые я упомянул, содержат неработающие символические ссылки, и поэтому о них сообщают. Существует множество проблем с этим, которые можно найти, выполнив поиск ENOENT: no such file or directory, stat ".steampath", например, github.com/nuxt/create-nuxt-app/issues/591





Пожалуйста, установите актуальную библиотеку react-router-dom.
yarn add react-router-dom
Вы установили только библиотеку определений типов react-router-dom. Вам также необходимо установить реальную библиотеку react-router-dom.