输入 '{ 路径：字符串；元素：元素；}' 不可分配给类型“IntrinsicAttributes & BrowserRouterProps”

Question

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

输入 '{ 路径：字符串；元素：元素；}' 不可分配给类型“IntrinsicAttributes & BrowserRouterProps”。

尚未在网上找到任何有帮助的内容。我还安装了react-router-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

问题是导入，您由于某种原因导入并将 a 呈现BrowserRouter为 a Route。警告的“ BrowserRouter Props”部分应该是关于打字差异的一个很好的线索。

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安装任何无关的东西。