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={}
에는 함수가 들어갈 수 없기 때문에 발생하는 오류이다. 오로지 컴포넌트만 넣을 수 있다.
그렇다면 어떻게 해결해야 할까?
간단하다. 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>
);
}
hoc 함수를 적용할 컴포넌트에서 export에 적용하면 된다.
import Auth from "../hoc/auth"
const LandingPage = () => {
return (
<section className="landing-page">
landing page
</section>
);
};
export default Auth(LandingPage, null);