/students/:id URL 접속 시 /students로 돌아오는 문제

HyungGeun-Cho commented 3 years ago

요약

/students/:id URL을 직접 입력해서 이동할 때, 계속해서 /students로 돌아오게 됩니다.

상황

과제 스펙에서 말씀해주신 바와 같이 ${본인 배포 url}/students/${본인 학생 중 하나 id} 로 바로 접속하면 그 학생 데이터가 바로 나타나야 합니다. 그런데 예를 들어 /students/208로 치면 아예 해당 url을 찾지 못하고 /students로 연결됩니다. 현재 아직 배포 전으로, localhost에서의 상황입니다!

문제 내용

아래와 같이 /students 페이지에서 학생 세부정보 버튼을 클릭하면, 학생 세부정보 페이지로 잘 이동됩니다. 이때의 url은 /students/208로 잘 나타납니다. useParams를 통해서 parameter가 잘 전달되는 것도 확인하였습니다.

 <Link to={"/students/" + selectedStudent.id} className="detailButton">
            <DetailIcon className={"detailIcon"} />
          </Link>

그런데, 해당 학생 세부정보 페이지에서 바로 새로고침 버튼을 누르거나 url을 쳐서 바로 접속하려고 하면, 해당 url을 아예 찾지 못하고 바로 /students로 접속되어 버립니다.

console을 통해서 확인해봤을 때 Redirect의 문제는 아닌 것 같습니다. /students/208에서 /students로 Redirect된 것이라면 학생세부 정보페이지에 접속했다는 로그가 떠야하는데 아예 나타나지 않고 /students 페이지로 새로고침 되어 버립니다.

버튼을 통해서 순차적으로 들어가면 잘 들어가지는데, 바로 접속할 때는 왜 오류가 나는지 결국 잘 모르겠어서 질문드립니다..!

아래는 App.js에서 라우팅 시킨 내역입니다. 감사합니다!!

 <BrowserRouter>
      <Switch>
        <RestrictedRoute
          exact
          path="/login"
          restricted={false}
          component={LoginPage}
        />
        <RestrictedRoute
          exact
          path="/students"
          restricted={true}
          component={StudentListPage}
        />
        <RestrictedRoute
          exact
          path="/students/:id"
          restricted={true}
          component={StudentInfoPage}
        />
        <Redirect to="/students" />
      </Switch>
    </BrowserRouter>

woohm402 commented 3 years ago

먼저 현상을 확실히 확인하고 원인을 파악해야 할 것 같습니다.

정말 리다이렉트가 아닌지 확인하기 위해 아래 사진과 같이 브라우저 url history를 확인해보시기 바랍니다. console로 체크하는 것보다 조금 더 확실한 방법입니다.

/students에서 새로고침했을 때는 리다이렉트 없이 잘 되나요?
App.js에서 Redirect to="/students"를 Redirect to="/login"으로 변경해보고, 다시 /students/208로 접속해보시기 바랍니다. /login으로 가나요, 아니면 /students로 가나요?

버튼으로는 잘 되는데 새로고침으로는 안 된다면 로그인 판별 로직이랑 렌더 한틱 차이로 인해 로그인이 안된 걸로 판단되어 restricted된 게 아닐까 하는 의심이 첫 번째로 드네요!

HyungGeun-Cho commented 3 years ago

답변 감사합니다 :)

리다이렉트 아닌 것 확인했습니다!
/students에서 새로고침하면 이전 방문기록이 아예 없는 것을 보아 리다이렉트 된 것 같지는 않습니다.
/students로 갑니다..! 로그인 판별 로직 다시 한번 살펴보겠습니다!!

HyungGeun-Cho commented 3 years ago

확인 결과, 일단 로그인 판별 로직이 문제인 것 같습니다..! 감사합니다..ㅎ

woohm402 commented 3 years ago

아하 넵넵! 추가로 질문 있으시면 또 해주세요!

HyungGeun-Cho commented 3 years ago

해결되었습니다! :)

wafflestudio / seminar-2021

/students/:id URL 접속 시 /students로 돌아오는 문제 #541

요약

상황

문제 내용