警告：道具类型失败：提供给“路由”的道具“组件”无效：道具不是路由中的有效 React 组件答案

【问题标题】：Warning: Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component in Route警告：道具类型失败：提供给“路由”的道具“组件”无效：道具不是路由中的有效 React 组件
【发布时间】：2021-01-29 12:36:34
【问题描述】：

我不明白为什么我会在控制台中收到此错误消息。我目前有一个名为 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;

这是我的主页的代码，它没有收到错误消息。

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 />
    </>
  );
}

我从该组件 Resume 中收到一条错误消息。该页面当前呈现正常，但我在控制台中收到错误。

import React from "react";

export default function Resume() {
    return <div>Resume</div>
}

【问题讨论】：

你能试试这个 import React from "react";导出默认简历 = () =>
简历
我的 IDE 抱怨 Resume 是一个未解析的变量或类型。你的意思是这样吗？ const Resume = () =>
Resume
导出默认简历；这也有相同的结果。
stackoverflow.com/questions/38853027/… 你试过这个吗？

标签： javascript reactjs

【解决方案1】：

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

希望我对你有所帮助。

【讨论】：

对不起，是的，这里有一个退货声明，我没有正确写在上面。我的页面呈现正常，但我在控制台中收到错误。