Error: Functions are not valid as a React child. Unsure of where error is

Question

这是我在上一个问题的同一应用程序中遇到的两个错误之一。这是第一个错误：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
Routes@http://localhost:3000/React-Portfolio/static/js/bundle.js:40930:7
div
div
Header@http://localhost:3000/React-Portfolio/static/js/bundle.js:581:1
Router@http://localhost:3000/React-Portfolio/static/js/bundle.js:40867:7
BrowserRouter@http://localhost:3000/React-Portfolio/static/js/bundle.js:40344:7
div
App

我不确定如何完全调试它，所以不确定它说错误存在的位置...这是存储库：https://github.com/kstaver/React-Portfolio

Answer 1

使用 react-router v6，您必须传递一个元素作为 Route 组件上 element 属性的值，但您将组件作为元素发送。要解决此问题，您需要将所有路线中的 <Route path="/about" element={About} /> 更改为 <Route path="/about" element={<About />} />。实际上你的路由必须这样配置：

 <Routes>
   <Route exact path="/" element={<Navigate to="/about" replace/>} />
   <Route path="/about" element={<About />} />
   <Route path="/portfolio" element={<Portfolio />} />
   <Route path="/contact" element={<Contact />} />
   <Route path="/resume" element={<Resume />} />
 </Routes>

Error: Functions are not valid as a React child. Unsure of where error is

Error: Functions are not valid as a React child. Unsure of where error is

javascript

node.js

reactjs

react-dom