Router 2 : Link to 주소창은 바뀌지만 페이지는 안바뀌는 현상

[박준영]

Link to 사용해서 주소창은 /detail 로 바뀌지만 페이지는 /detail 로 바뀌지 않고 작동 안하는 현상 해결하기 

비슷한 질문이 많아 문제 해결 시도들을 적어놓고 마지막 방법에 대해 질문해봅니다. 페이지 render 문제라는데 이번 버전 리액트에선 이 문제가 어떻게 깔끔하게 해결될 수 있는지 궁금하네요.

1. (비슷한 질문에 대한 선생님의 답변 방법)

index.js 의 코드를 구버전 리액트 코드로 바꾼다. (render ... document.querySelectorById ... 등등 부분 모두) 

>>>>>> 해결은 되지만 콘솔창에 붉은 글씨(대충 구버전은 코드는 앞으로 지원 안 한다는 뜻)가 신경쓰임

 

2. (웹 검색해서 찾은 해결 방법 중 가장 간단한 방법)

index.js 에서 <React.StrictMode> 태그를 지움

>>>>>> 해결은 되지만 콘솔창에 대충 a 태그가 문제라는 붉은 글씨 뜸 

 

3.  (시도해본 방법)

2번처럼 index.js 에서 <React.StrictMode> 태그를 지우고,

{ useHistory } 를 import 해서 Link to 대신 onClick 에서 history 이용.

 

import { useHistory } from 'react-router-dom';

let history = useHistory();

...

<Nav.Link onClick={() => {
history.push('/detail')
}}>Detail</Nav.Link>

...

>>>>>> 콘솔창 붉은글씨 사라지고 잘 작동됨, 근데 이렇게 작동하는게 Link to 처럼 새로고침 없이 잘 작동하는 상태인가요?  StrictMode 태그를 지우면 대표적으로 어떤 문제가 발생할 수 있나요? 
 

[박준영]

지금보니 라우터 새 강의가 올라왔네요. 새 강의 보고오겠습니다.

[codingapple]

history.push() 해도됩니다 

[박준영]

다른분들도 혹시 찾아볼 경우를 위해 문제해결 후 정리합니다.

- 22.4.29 현재 업로드된 신강좌는 react-route-dom 6버전(구강좌는 5버전이었음)을 사용하므로, 신강좌 문법대로 사용시 정상 작동됨 (react 업데이트에 맞춰 react-route-dom 렌더를 해결한 버전인듯)

-단, 함수나 명령어가 꽤 바뀜. useHistory() >> useNavigate(), Switch >> Routes, <Route element={}/> 등으로 바꾸어야하므로 라우트 신강좌 코드를 쭉 따라가면서 수정해야 함. 

[글쓴이]

글