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

React Rouer v6부터 component={} 대신 element={}를 사용해야 한다.

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>
  );
}

그런데, 위와 같이 hoc 함수로 컴포넌트를 감싸야할 경우 오류가 발생한다.

🚫 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

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

그렇다면 어떻게 해결해야 할까?

방법 1.

간단하다. hoc 함수를 App.js에 import한 다음, element={}에 넣기 전에 미리 hoc 함수를 적용하면 된다.

(App.js)

import Auth from "../hoc/auth"

function App() {
  const AuthLandingPage = Auth(LandingPage, null);
  const AuthLoginPage = Auth(LoginPage, false);
  const AuthRegisterPage = Auth(RegisterPage, false);

  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={ <AuthLandingPage /> } />
          <Route path="/login" element={ <AuthLoginPage /> }/>
          <Route path="/register" element={ <AuthRegisterPage /> } />
        </Routes>
      </Router>
    </div>
  );
}

방법 2.

hoc 함수를 적용할 컴포넌트에서 export에 적용하면 된다.

import Auth from "../hoc/auth"

const LandingPage = () => {
  return (
    <section className="landing-page">
      landing page
    </section>
  );
};

export default Auth(LandingPage, null);