Functions are not valid as a React child .

 

 

1) React Rouer v6부터 component={} 대신 element={}를 사용

- hoc 함수로 컴포넌트를 감싸야할 경우 오류가 발생

 

function App():JSX.Element {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={ Auth(LandingPage, null) } />
          <Route path="/login" element={ Auth(LoginPage, false) }/>
          <Route path="/register" element={ Auth(RegisterPage, false) } />
        </Routes>
      </Router>
    </div>
  );
}

 

element={}에는 함수가 들어갈 수 없기 때문에 발생하는 오류이다. 오로지 컴포넌트만 넣을 수 있다!!

 

function App():JSX.Element {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={ <LandingPage> } />
          <Route path="/login" element={ <LoginPage> }/>
          <Route path="/register" element={ <RegisterPage> } />
        </Routes>
      </Router>
    </div>
  );
}

 

 

 

출처

https://akjfal.tistory.com/entry/Functions-are-not-valid-as-a-React-child-This-may-happen-if-you-return-a-Component-instead-of-Component-from-render

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.

 

https://intrepidgeeks.com/tutorial/apply-react-error-logrouter-v6-route-element-hoc

[React 에러 일지] Router v6 - Route element hoc 적용하기