인프런 커뮤니티 질문&답변
작성한 질문수
34강 인증 체크에서 element 사용 때문에 에러나시는 분들 이렇게 하심 됩니다.
작성
·
57
0
component 사용 시 에러 발생
function App() {
return (
<Router>
<div>
<Routes>
<Route path="/" element={Auth(LandingPage, null)} />
<Route path="/login" element={Auth(LoginPage, false)} />
<Route path="/register" element={Auth(RegisterPage, false)} /> */}
</Routes>
</div>
</Router>
);
}
element 사용 시 아래처럼 진행하심 잘됩니다. (element 안에는 함수가 못들어간다하네요)
function App() {
const AuthLandingPage = Auth(LandingPage, null);
const AuthLoginPage = Auth(LoginPage, false);
const AuthRegisterPage = Auth(RegisterPage, false);
return (
<Router>
<div>
<Routes>
<Route exact path="/" element={<AuthLandingPage />} />
<Route exact path="/login" element={<AuthLoginPage />} />
<Route exact path="/register" element={<AuthRegisterPage />} />
</Routes>
</div>
</Router>
)
}답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 해도디님, 리액트 Router Dom에서 발생하는 오류와 관련된 질문 주셨네요.
리액트 라우팅에서 'component'에서 'element'로 인자를 변경하면서 함수 호출의 형식이 바뀌었습니다. 이전에는 component 속성으로 바로 함수 컴포넌트를 넘겨주었지만, 이제는 element 속성을 사용해야 하는데, 이때에는 JSX 형태로 넘겨주어야 합니다.
질문에서 제공하신 해결책은 정확합니다. Auth HOC를 사용해 래핑한 컴포넌트를 변수로 선언한 후 element에 JSX 형태로 전달해주는 것입니다. 이는 아래처럼 구현됩니다:
function App() {
const AuthLandingPage = Auth(LandingPage, null);
const AuthLoginPage = Auth(LoginPage, false);
const AuthRegisterPage = Auth(RegisterPage, false);
return (
<Router>
<div>
<Routes>
<Route exact path="/" element={<AuthLandingPage />} />
<Route exact path="/login" element={<AuthLoginPage />} />
<Route exact path="/register" element={<AuthRegisterPage />} />
</Routes>
</div>
</Router>
)
}
이 방법을 통해 각 페이지 컴포넌트를 HOC로 감싼 후 JSX 요소로 라우트에 전달하고 있습니다.
비슷한 주제를 다룬 게시물들을 참고하기 위해 다음 링크를 확인해 보세요:
- HOC auth.js에 관한 오류 발생 시 참고 사항
- Router node v.6 바뀐 부분
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.