Router사용 간단정리🎯

이번 에어비앤비 미션 중,
화면전환이 필요할 때 주소창에 url 파라미터, 쿼리를 붙여 페이지 이동을 하게 했다. 기존에 사용해보았던 history를 사용했었는데 다른 방법도 알면 좋을 듯해서 좀 더 살펴보았다.

Link to 로 이동하기

• 라우터를 설정해주는 페이지에서는

<Router path='/basicUrl" component={About}>

여기까지만 입력해도 충분하고 exact true 설정을 하지 않으면 된다.

• Link 사용하기

<Link to = {`/basicUrl/?city='seoul`&personnel=3}>검색</Link>

Link태그 내부는 a 태그로 되어있다. 다만 리액트에서 직접 a태그를 사용하면 페이지가 새로고침 되므로 꼭 Link로 이동을 해야한다.

• 주소창 뒤의 queryString 사용하기
  주소뒤에 따라붙은 queryString을 기반으로 새로 데이터를 가공하기 위해 해당값을 추출해낸다. 이때 qs 라이브러리와 location객체를 사용할 수 있다.

qs을 사용하기 위해 설치가 필요하다.

npm i --save-dev @types/qs

import qs from 'qs'
function Example({location}){
	const query = qs.parse(location.search, {
    ignoreQueryPrefix: true,
    });
    const city = query.city
	return (
		<div>여기는 {city}입니다.</div>
    )
}

여기서 ignoreQueryPrefix: true를 설정하지 않으면
location.search 값이 '?city:1'로 나온다.
true 설정을 하면 city:1을 얻을 수 있음.
추가로 값을 반영할 땐 파라미터 주소 뒤 '&'로 추가해준다. (=> {city: 'seoul', personnel: '3'})

history로 이동하기

• 라우터 설정

<Router path='/basicUrl/:city/:personnel' component={About}/>

• history 사용

function Example({match}){
    const info = match.params
    const city = info.city
    const personnel = info.personnel
    const goResult = () => history.push(`/basicUrl/${city}/${personnel}`)

	return (
    		<button onClick={goResult}>검색</button>
    )

match 객체를 받아와 사용해야하며
match.params를 통해 정보를 얻어올 수 있다.

history객체에는 지금처럼 페이지를 이동시킬 수 있는 push,
이전페이지로 돌아가는 goback, 페이지 이동을 방지할 수 있는 block이 있기때문에 좀 더 유용하게 사용가능해 보인다.

useReactRouterHook

마지막으로 useReactRouterHook 이 있는데, 이는 최상위에서 라우터를 설정하지 않아도 라우터를 사용할 수 있다. (withRouter로 컴포넌트를 감싸는 방법도 있음)

import {useReactRouterHook} from 'react-router-dom';
function Example(){
	const {location, history, match } = useReactRouterHook()
    ...
    이제 위에서와 같이 사용가능함.
    ...
}

ㅎㅎ지극히 까먹지않기 위한 메모 : )
무었보다 history객체를 좀더 유용하게 사용해봐야겠다.