react报错Functions are not valid as a React child. This may happen if you return a Component instead o

最新推荐文章于 2024-10-31 00:53:19 发布

liguoyuan819

最新推荐文章于 2024-10-31 00:53:19 发布

阅读量4.7k

点赞数 2

分类专栏： react使用文章标签： react

本文链接：https://blog.youkuaiyun.com/liguoyuan819/article/details/124267113

版权

react使用专栏收录该内容

2 篇文章

订阅专栏

"本文讲述了在React中如何避免'Functions are not valid as a React child'错误，当你在路由组件中遇到这个问题，需确保将组件渲染为元素，如element={<route.component />}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react报错 Functions are not valid as a React child. This may happen if you return a Component instead of <Component>

react渲染路由组件时，循环遍历使用route展示对应的组件，element里面写对应的组件时，如果直接用element={route.component}会报错，这时不会将route.component渲染成组件，而应该写成element={<route.component></route.component>} 或者element={<route.component/>}

import './App.css'
import {
  BrowserRouter as Router,
  Routes,
  Route
} from 'react-router-dom'
import routes from './router'

function App() {

  return (
    <Router>
      <Routes>
        {
          routes.map(route => <Route exact key={route.path} path={route.path} element={<route.component></route.component>}>
          </Route>)
        }
      </Routes>
    </Router>
    
  )
}

export default App