类型 '{ path： string; element： Element; }' 不可分配给类型 'IntrinsicAttributes & BrowserRouterProps'

Question

试图在我的React Typescript应用程序中使用React Router设置路由，但在我的路径上收到错误关键字：

类型"｛path:string；element:element；｝"不可分配给类型"IntrnsicAttributes&BrowserRouterProps'。

尚未在网上找到任何有帮助的内容。我已经安装了react路由器dom v6和@types版本。

应用程序.tsx

import * as React from 'react'
import './App.css'
import { BrowserRouter, BrowserRouter as Route, Routes } from 'react-router-dom';
import { Header } from './components/navbar/Header';
import Admin from "./components/pages/Admin"
import Approvals from "./components/pages/Approvals"
import Dashboard from "./components/pages/Dashboard"
import Providers from "./components/pages/Providers"
import Requestors from "./components/pages/Requestors"
import Services from "./components/pages/Services"
export default function EAOneApp() {
return (
<div className="eaOneApp">
<BrowserRouter>
<Routes>
<Route path='/:page' element={<Header />} />
<Route path='/' element={<Header/>} />
<Route path='/' element={<Dashboard/>} />
<Route path='/approvals' element={<Approvals />} />
<Route path='/requestors' element={<Requestors />} />
<Route path='/services' element={<Services />} />
<Route path='/providers' element={<Providers />} />
<Route path='/admin' element={<Admin />} />
</Routes>
</BrowserRouter>
</div>
);
}

Answer 1

问题是导入，出于某种原因，您正在将BrowserRouter导入并呈现为Route。">浏览器路由器道具"；警告的一部分应该是关于打字差异的一个很好的线索。

import {
BrowserRouter,
BrowserRouter as Route, // <-- Whoopsies!
Routes
} from 'react-router-dom';

只需导入Route组件。

import { BrowserRouter, Route, Routes } from 'react-router-dom';

此外，react-router-dom@6完全是用Typescript编写的，因此不应该有任何多余的@types需要安装。