react hook router

useHistory

🔸 상황 설정: 1:1 문의 내역에 page를 넘길 때마다 쿼리스트링을 변화시킨다

// 1:1 문의내역 열 떄 
useEffect(() => {
	getList(page ?? 1);
},[])

async function getList(page){
	...
	...
	history.push({
		pathname: 'account/inquiry-list',
		search: `page=${page}`
	)}
}

• history.push를 해줌으로서 1:1문의내역 들어올 때 url account/inquiry-list/?page=1
• 그럼 여기 getList(page) 에 page값은 어떻게 받아오는거냐?

//쿼리스트링 값만 받아올 수 있는 라이브러리
import qs from 'query-string';
 

const { page } = qs.parse(location.search, { parseNumbers: true}) as { page: number };

console.log(location.search); // ?page=1
//쿼리스트링 값만 추출할 수 있다 
console.log(page); // 1

📌 history.location은 변하기 때문에 사용하지 않는다

useLocation

현재 머물고 있는 페이지의 대한 정보를 알려준다. (페이지 이동하면서 값을 전달 받을 때)

🔸 상황 설정: 정보포털 자세히 보러가기 버튼이 있다. 이 버튼을 클릭하면 학교 홈페이지로 넘어가도록 하기
새로고침같이 고정값이 필요할 때?

// 버튼이 포함된 컴포넌트 

function handleClick() {
	....
	....
	if (isHana) history.push({
		pathname: '/school-info'
		//url은 유저가 마음대로 작성 가능 onUrl..등등
		state: {url: "http://sadang.sen.es.kr"}
	});

}

<LinkBtn onClick={handleClick}>정보포털 자세히 보러가기</LinkBtn>

// schoolInfo 컴포넌트에 와서  locatation의 정보를 콘솔창에 쳐보았다

{pathname: "/school-info", state: {…}, search: "", hash: "", key: "2acshh"}
	hash: ""
	key: "2acshh"
	pathname: "/school-info"
	search: ""
	state: {url: "http://sadang.sen.es.kr"}
	...

• pathname: 웹 url: mobile/school-info 결과 값은 pathname = school-info
• state: 보내준 데이터들. . .

useParams

useLocation은 앞서 언급한 것 처럼 쿼리스트링 정보를 알기 좋다면 useParams는 path parameter(동적 라우팅) 알기 좋다

🔸 1:1 문의내역 수정할 때 seq값을 api를 통해 받아서 일부 내용을 불러와야한다

// route 컴포넌트 여기서 seq가 패쓰파라미터 
<Route path="/service/inquiry/:seq?" component={Inquiry} />

// 패쓰파라미터를 불러와보자
const { seq } = useParams<TParams>();
console.log(seq) // 456 이런식으로 불러와짐 

참조

React Router dom의 유용한 hooks들 📃