警告：失败的道具类型：提供给"路由"的道具'component'无效：道具不是路由中的有效 React 组件

Question

我不明白为什么我在控制台中得到这个错误消息。我目前有一个名为Home的函数组件以相同的方式设置，并且我没有得到该组件的错误消息。

下面是我的App.js代码:

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './components/pages/Home';
import Resume from './components/pages/Resume';
function App() {
return (
<>
<Router>
<main>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/resume' component={Resume} />
</Switch>
</main>
</Router>
</>
);
}
export default App;

这是我的Home的代码，它没有得到错误消息。

import React from 'react';
import HeroSection from '../HeroSection';
import About from './About';
import Skills from './Skills';
import Footer from '../Footer';
export default function Home() {
return (
<>
<HeroSection />
<Skills />
<About />
<Footer />
</>
);
}

我从这个组件简历中得到一个错误消息。页面当前呈现良好，但我在控制台中得到错误。

import React from "react";
export default function Resume() {
return <div>Resume</div>
}

Answer 1

问题是，在你的简历文件中，你没有返回任何东西，添加一个return(<div>Resume</div>)，问题就解决了。

我希望我对你有所帮助。