리액트) useState를 사용해서 라우터로 파일 이동 시키기 도와주세요!

Question

안녕하세요.리액트 공부중에 이해가 안되는 부분이 있어서 질문 올리게 되었습니다.제가 useState로 false true를 사용해서 삼항연산자로 파일이동을 시키려고 합니다.저렇게 라우터를 사용해서 실행을 하면 main으로 이동이 되었지만 Login내용이 나타나지 않습니다.하지만 이렇게 컴포넌트로 삼항연산자를 사용해서 실행을 시키면 잘 나타나게 됩니다.위에 2개는 이 코드로 실행을 진행했습니다.2 번째 사진은 왜 실행이 되고1 번째 사진은 왜 실행은 되지만 main으로 이동 시 내용이 안 나타나는지 궁금합니다.글 끝까지 봐주셔서 감사드립니다.24년도에는 좋은 일 가득하시고 따뜻한 연말연시 되시길 바랍니다.

아리까리 · Answer

react에서 페이지간 이동은 react-router의 기능을 이용해야 합니다.<RouterLink /> 컴포넌트를 이용해서 링크 기능을 갖고 있는 UI를 만들던가어떠한 행동에 따라 페이지가 이동되야하는 경우라면 useNavigate 훅을 사용해서 반환되는 navigate 함수를 통해 페이지를 이동시켜야 합니다.document.location.href에 값을 할당하여 페이지를 이동하는 경우 서버에 페이지를 요청하게 됩니다.그럼 그동안 페이지 상호작용에서 쌓여왔던 행동이나 state 들이 날라가겠죠?리액트는 클라이언트 사이드에서만 돌아가니까요.

리액트) useState를 사용해서 라우터로 파일 이동 시키기 도와주세요!

1개의 답변

Q&A 목록