이번 글에서는 Functions are not valid as a React child. 에러 해결 방법에 대하여 알아보겠습니다.
Warning: Functions are not valid as a React child.
[에러가 발생한 코드]
App.js
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import ReactRouter1 from './ReactRouter1';
function App() {
return (
<div className="App">
<Routes>
<Route exact path="/ReactRouter1" element={ReactRouter1}/>
</Routes>
</div>
)
}
export default App;
ReactRouter1.js
import React from 'react';
function ReactRouter1(props) {
return(
<>
<h2>path="/reactRouter1"</h2>
<h3>reactRouter1</h3>
</>
)
}
export default ReactRouter1;
[에러 원인]
render() 내에서 ReactRouter1 함수를 실행 안 해서 발생한 에러입니다. 함수는 실행을 해야 작동을 합니다. 위의 코드에서는 함수를 실행을 안 한 상태입니다.
[해결 방법]
간단합니다. 함수를 실행해주시면 됩니다.
<Routes>
<Route exact path="/ReactRouter1" element={ReactRouter1()}/>
</Routes>