@types/react-маршрутизатор-dom выдает ошибки при сборке vite

#reactjs #typescript #react-router-dom

Вопрос:

Я создаю приложение react с vite и машинописным текстом. Когда я использую «vite» для разработки, он отлично работает. Но когда я использую «tsc amp;amp; vite build», @types/react-router-dom и @types/react-router выдают сотни ошибок, таких как

node_modules/@types/react-router-dom/index.d.ts:13:10 — ошибка TS2305: Модуль «react-маршрутизатор» не имеет экспортированного элемента «совпадение».

пакет.json

 {  "name": "client",  "version": "1.0.0",  "description": "",  "scripts": {  "dev": "vite",  "build": "tsc amp;amp; vite build",  "serve": "vite preview"  },  "dependencies": {  "react": "^17.0.2",  "react-dom": "^17.0.2",  "react-router-dom": "^6.0.2"  },  "devDependencies": {  "@types/react": "^17.0.37",  "@types/react-dom": "^17.0.11",  "@types/react-router-dom": "^5.3.2",  "@vitejs/plugin-react-refresh": "^1.3.6",  "autoprefixer": "^10.4.0",  "postcss": "^8.4.3",  "sass": "^1.43.5",  "tailwindcss": "^2.2.19",  "typescript": "^4.5.2",  "vite": "^2.6.14"  } }  

Использование react-маршрутизатора-dom

Приложение.tsx

 import React from 'react' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import Nav from './components/Nav'  export default function App() {  return (  lt;gt;  lt;Routergt;  lt;Nav/gt;  lt;Routesgt;  lt;Route path="/"gt;lt;/Routegt;  lt;/Routesgt;  lt;/Routergt;  lt;/gt;  ) }  

Nav.tsx

 import React from 'react' import { Link } from 'react-router-dom' import Logo from '../media/profile1.jpg' import 'Nav.scss'  export default function Nav() {  return (  lt;gt;  lt;header className="fixed top-0 left-0 flex flex-row items-center bg-gradient-to-r from-violet-700 via-indigo-700 to-blue-700 w-screen" style={{ height: '20vh' }}gt;  lt;Link to='/' className="h-2/3 md:h-4/5 mx-4"gt;  lt;img className="h-full rounded-3xl" src={Logo} alt="" /gt;  lt;/Linkgt;  lt;div className="h-2/3 md:h-4/5 mx-4 flex items-center justify-center text-white font-bold text-7xl title"gt;  lt;/divgt;  lt;/headergt;  lt;div style={{ marginBottom: '20vh' }} gt;lt;/divgt;  lt;/gt;  ) }  

Ответ №1:

Я действительно узнал, что react-router-dom v6 не нуждается в @types/react-router-dom, поэтому я решил эту проблему, просто удалив ее.