React-Router-Dom v6 되며 바뀐 점 정리

 

엥 인강 보면서 React-Router-Dom을 공부하고 있는데 선생님이랑 똑같이 하는데 난 실행이 안된다....

왜 안되지 하며 구글링 시작

버전이 달라서 안 되는 거라고 한다.

 

 

1. Route는 Routes 로 감싸주기    switch -> Routes 로 바뀌었다.

2. component는 element로 바뀐다. 

   <Route path="/" component={Home} />      →      <Route path="/" element={<Home />} />

   로 바뀌었다. 

3. exact가 기본으로 되어 exact 는 이제 사용 안 한다고 한다.

 

서브 경로가 필요한 경우 path에 * 사용한다.

이 정도만 바꿔줬는데 오 이제 실행된다. 

또 주의해야 하는 것들이 있으면 더 추가로 정리해야겠다.

 

하 이번엔 : id 가 말썽 ,,,

 

 

 

4. :id path 이용하기 - useParams

 

const id = props.match.params.id;   이렇게 id 값을 가져오려 했는데 안된다.

 

 

import { useParams } from "react-router";  

 

const { id } = useParams();   이렇게 넣어주니 실행된다.  

 

5. URLSearchParams

const searchParams = props.location.search; 이렇게 불러오려니 또 실패

아래와 같이 변경하였다.

 

import { useLocation } from "react-router";

 

const { searchParams } = useLocation();

 

 

 

위 방법으로는 안되는 브라우저등이 있어 실행이 안될 경우가 있는데

 

그럴 경우 아래 query-string을 이용하여 나타낼 수 있다.

 

 

 

 

6.  NavLink에 activeStyle, activeClassName 사라졌다.

활용방법은 다시 한번더 봐야 할듯

 

 

7. useRouterMatch()  -> useMatch() 로 바뀌었다

 

useMatch() 는

현재 위치를 기준으로 지정된 경로에 대한 일치 데이터를 반환해준다.

그래서 만약 내가 선택한 url에 들어가 있다면 object가 반환되고 없다면 null 값이 반환된다.

import { useMatch} from "react-router-dom";

const priceMatch = useMatch("/:coinId/price");

console.log(priceMatch);