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;

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

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>
}

Answer 1

问题是在您的简历文件中，您没有返回任何内容，添加 return(<div>Resume</div>) 即可解决问题。

希望对您有所帮助。

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

1 个答案: