错误：函数作为 React 子级无效。不确定错误在哪里答案

【问题标题】：Error: Functions are not valid as a React child. Unsure of where error is错误：函数作为 React 子级无效。不确定错误在哪里
【发布时间】：2022-01-02 10:33:09
【问题描述】：

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

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

【问题讨论】：

标签： javascript node.js reactjs react-dom

【解决方案1】：

使用 react-router v6，您必须将元素作为 element 属性的值传递给 Route 组件，但您将组件作为元素发送。要解决此问题，您需要在所有路线中将 <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>

【讨论】：