类型上不存在属性“组件”

Question

为什么当我在“Route”中声明“component”属性时会出现此错误；

类型“IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)”上不存在属性“组件”。

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

import './App.css'
import HomePage from './pages/HomePage'

function App() {
  return(
    <div>
    <Routes>
      <Route path="/" component={HomePage}/>
    </Routes>
    </div>
  )
} ``` The problem might be; because I dont use 'exact path="/"' that might also give an error

Answer 1

随着react-router-dom升级到6.0版本，某些属性发生了变化。您使用的语法适用于 5.0 版本。要更新到 v6，请对您的代码进行以下更改：

<Route path="/" element={<HomePage />} />

Answer 2

路由器的版本 6 改变了创建此类路由的方式 - https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/overview

nanoTitan 得到了正确的答案：

<Route path="/" element={<HomePage />} />

关于exact- 我认为你不需要再担心这个了。如果你有一条类似的路线/和另一条类似版本6的路线，/about那么它足够智能，可以路由到about。显然，即使您有类似/user/:uuid和/user/new- 的路线，导航到/user/new也会被理解为新页面。

我还发现教程之类的都是关于版本5的，这是一个令人困惑的学习环境。

Answer 3

我通过简单地输入这个来解决它；

<Route path="/">{HomePage}</Route>

它起作用了