34강 인증 체크에서 element 사용 때문에 에러나시는 분들 이렇게 하심 됩니다.
119
投稿した質問数 4
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 바뀐 부분
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
깃 이메일이랑 비번이 필요하다고 하네요
0
35
1
404 에러
0
102
1
로그인, 로그아웃, 토근 작동 안 함
0
239
0
로그아웃 findOneAndUpdate 함수
0
170
1
9강 오류 어떻게 해결하나요?
0
194
1
localhost 에서 연결을 거부했습니다.
0
1927
4
포스트맨에서 true가 안떠요
0
150
1
왜 안되나요
0
129
1
몽고db 연결 오류가 납니다 위에껀 입력한 코드, 아래껀 터미널이에요
0
243
1
로그아웃 401 에러(Unauthorized)
0
504
2
암호가 해싱되지 않고 입력값 그대로 db에 저장되는 문제
0
149
1
7강중에서
0
162
2
User.findByToken is not a function
0
211
1
루트 디렉토리
0
271
1
useState
0
560
1
프록시 잘 설정했는데도 404 오류 뜨는 분들
5
875
6
webpack 관련 에러 질문
0
219
1
리액트 관련 질문
0
272
1
14강 로그아웃 안됨
0
318
1
mongoDB 데이터 확인하는 법
0
410
1
postman 에러
0
291
1
선생님 리덕스를 사용하면 어떠한 부분이 좋은지 알 수 있을까요?
0
234
1
다음과 같은 에러들이 발생합니다.
0
273
1
14강 로그아웃 기능 구현시 postman에서 Cannot POST 오류가 뜹니다.
0
379
1