[Hook] useParams (2) - querystring (useLocation, useSearchParams)

보통은 url 호출시 querystring 을 이용하여 파라메터 값을 전달하게 된다. 

이를 처리 하기 위해선 useLocation 과 useSearchParams Hook을 추가로 사용해야 한다. 

 

 

• 호출하는 쪽은 크게 바뀌는게 없으나, Route는 변경해야 한다. /:item... 이부분을 지워야 한다

import {useParams, useNavigate, Route, Routes, BrowserRouter} from 'react-router-dom';

.....

const navigate = useNavigate();

...

//<Route path='/위치/:item/:item2.....' element={<엘레먼트명/>} /> 에서 /:item..  이부분을 지워야 한다
<Route path='/위치' element={<엘레먼트명/>} />
...

<button onClick={() => navigate('위치?item=문자열&item1=문자열')}>Click </button>

//혹은 Link 태그를 사용해도 된다 import 추가 확인
//<Link to='위치?item=문자열&item1=문자열'>Click</Link>

 

• useLocation
  • url 에 관련된 문자열 항목들을 리턴한다
  • .pathname : 상대경로 url을 문자열로 리턴한다
  • .search : 경로 뒤에 붙은 queryString 결과를 리턴한다

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

...

const loc = useLocation();

console.log(loc.pathname);
// 현재페이지의 상대경로명 예 : help 리턴

console.log(log.search);
//queryString 그대로 반환 예 : ?item=xxx&item1=bbbb

• useSearchParams 
  • url에서 파라메터 부분만 리턴한다.
  • 배열 형식으로 변환을 해야 한다.

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

....

 const [params] = useSearchParams();
 const paramList = [...params];
 
 ...
 
 //첫번째 항목의 value 값
 {paramList[0][1]}
 
 
 //또는 키값을 알고 있을 경우 다음의 코드로 가져올 수 있다
 params.get("키값");