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

January 2, 2022

This is one of the two errors that I have encountered on the same application from my previous question. Here is the first error:

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

I am not sure how to debug this entirely so not really sure where it is saying the error exists… Here is the repository: https://github.com/kstaver/React-Portfolio

>Solution :

With react-router v6, you must pass an element as the value of element attribue on Route component, but you are sendeing component as element. To solve the problem you need to change <Route path="/about" element={About} /> to <Route path="/about" element={<About />} /> in all your routes. Actually your routes must be configured like this:

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