본문으로 바로가기

 

 

이번 글에서는 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>