react-router-dom给Route设置component属性提示不存在如何解决？

报错实际原因 #

• 该报错由react-router-dom v6版本的API不兼容导致：v6版本彻底移除了v5中Route组件支持的component、render属性，因此传入component属性时会触发类型不存在的报错。
• 你猜测的exact配置问题不成立：v6版本的Route默认就是精确匹配路径，不需要额外声明exact属性，该属性在v6中也已被移除。

解决方案 #

将Route的component属性替换为element属性，传入对应的组件JSX实例即可，修改后的代码如下：

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

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

function App() {
  return(
    <div>
    <Routes>
      <Route path="/" element={<HomePage />}/>
    </Routes>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Turhan Ergene