리액트 페이지 변환 질문드립니다!!

Question

코린이가 프로젝트 진행 중 질문드립니다. 리액트를 사용한 클라이언트와 express를 사용한 서버를 구성했습니다. 문제는 다음과 같습니다.로그인 시 클라이언트에서 아이디 비밀번호를 서버로 전달해주면 Passport 를 이용해서 Local 전략으로 로그인 성공/실패 여부를 판단합니다. 이때 로그인 결과에 따라서 리액트 페이지를 전환 시키고 싶습니다. 하지만 서버에서 redirect 시 서버 단의 라우터로 요청이 넘어갈 뿐입니다.그래서 제 질문은 로그인 결과에 맞게 어떻게 리액트 페이지를 전환 시키는지 입니다.지금 제 생각은 서버단에서 login-success / failure 경로의 라우터를 이용하여 클라이언트에게 결과를 응답하면 응답 결과에 따라 클라이언트 단에서 페이지를 전환시켜야 할 것 같습니다. 하지만 클라이언트에서 리액트 페이지를 어떻게 전환시켜야 할지도 모르겠네요. 이 때도 res.redirect()를 사용하면 될까요??불쌍한 코린이를 도와주세요 선배님들 ㅠㅠ

쿠쿠리쿠쿠 · Answer

리엑트에 history.push() 라는게있습니다 이값으로 응답값이 true이면 해당 url로 라우팅 해주는식으로 하면 어떨가 해용 아래는 예시코드 참고만 해주세요 ㅎㅎ .post(&#96;${BACKEND_URL} JSON.stringify(body), { headers: { &#34;Content-Type&#34;: &#96;application/json&#96; }, }) .then(response &#61;> { const token &#61; response.data.accessToken; console.log(token) if(token.length !&#61; null){ localStorage.setItem(&#34;accessToken&#34;, token) alert(&#34;어서오세요 환영합니다!&#34;) history.push({ pathname: &#34;여기에 라우팅할 패스 적기&#34; }) } }).catch(error &#61;> { alert(&#34;없는 사용자 입니다&#34;); })

lliijjiijjl · Answer

감사합니다 형님 ㅠㅠ 이렇게 또 하나 배워갑니다.공부해서 꼭 성공시킬게요!!

쿠쿠리쿠쿠 · Answer

아 근데 저거 라이브러리 까셔야됩니다 제가 이걸 뺴먹었네요 ㅠㅠ react-router라고 검색하시면 됩니다!

lliijjiijjl · Answer

이 글 보시는 분들,react-router 버전을 v6로 사용하신다면 useHistory가 useNavigate로 변경되었으니 참고들 하세요~~

리액트 페이지 변환 질문드립니다!!

4개의 답변

#passport 목록