[TeamNote]페이지 이동 구현하기_Trouble Shooting

원하는 방에 입장한 후 board, calendar, talk 페이지로의 이동을 구현해야했다.

사전에 방에 입장 할 떄마다 그 방의 고유 id 값을 이용해 동적 라우팅 처리를 해두었다.

그과정에서 일어난 이슈를 정리해보았다.

---

Trouble Shooting

라우터가 동작하지 않는 현상 발생😵‍💫

• 고치기 전 코드
  
  

return (
... // map을 이용해 3개의 Link를 뿌려주고 있다
 {{pages.map((page, idx) => {
    const pageNameToLower = page.toLowerCase();
    return (
      <Link
        key={idx}
        name={pageNameToLower}
        onClick={(e) => handleSelectedPage(e, idx)}
        className={`list-item ${
          selectedPage[idx] ? "list-item_clicked" : ""
        }`}
        to={`${location.pathname}/${pageNameToLower}`}
      >
        {page}
      </Link>
    );
 }

• 결과

 

...??

내가 기대한건

calendar 눌렀을 때 /main/62ebcd/calendar 

talk 눌렀을 때  /main/62ebcd/talk

으로 url이 이동하는거였다.

처음 /main/62ebcd/calendar를 눌렀을 땐 잘 이동하는데,

두 번째 클릭부턴 페이지 이름들이 중첩 되고있다..

 

해결방법

1. 직접 Link 3개 만들기(map 사용x)

  <Link to={`${location.pathname}/board`}>
    BOARD
  </Link>
  <Link to={`${location.pathname}/calendar`}>
    CALENDAR
  </Link>
  <Link to={`${location.pathname}/chat`}>
    TALK
  </Link>

실패.

 

2. location.pathname 대신 params 이용하기

 

스택오버플로우에서 나와 같은 이슈의 글을 찾았다.

역시 스오플은 진리다.

해석해보면 이렇다.

어떻게 to를 어떻게 만들었는지가 문제다.
match.url은 너의 현재 url이다. 그것은 입력한 url을 사슬처럼 연결시키게 된다.
결국 항상 현재의 url을 사용하기 때문에 url이 되풀이 될 수 있다.
너가 할당한 parameter를 사용하면 해결할지도.

location.pathname이 계속해서 내 현재 url을 가리키기 때문에 중복이 일어났던 것이었다.

그렇다면 매번 새로운 url을 사용하도록 하면 되겠다 싶어서 코드를 바꾸어보았다.

 

#1. URL parameter로 입력해둔 변수를 확인하기

 

#2. useParams 훅을 이용하여 접속해있는 페이지(Main)에서 id 값이 무엇인지 알아내기.

const params = useParams();
console.log(params); // 결과는?

짜잔.

고유 id값을 잘 가져온다.

#3. 가져온 id값을 이용해 to 안에 새로운 url을 넣어준다.

성공!

이동이 잘 된다!

결국 핵심은 현재 url을 이용하는게 아니라 새로운 url경로를 입력해줘야하는 문제였었다.

 

 

---

 

🙇🏻참고사이트

 

https://stackoverflow.com/questions/71875470/duplicate-parameter-in-url-react-js-router

Duplicate Parameter in URL React Js / Router

https://velog.io/@wiostz98kr/TIL51-l-React-Router-3%ED%83%84

리액트 라우터(React Router) - URL Parameters, Query Parameters (+URLSearchParams)