#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, поэтому я решил эту проблему, просто удалив ее.