[Typescript]react-router-dom-v6사용 useParams useLocation

typescript에서의 react-router-dom

기존 코드

react-router-dom@5버전이다.

<BrowserRouter>
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/login' component={Login} />
    <Route component={NotFound} />
  </Switch>
</BrowserRouter>

Typescript 코드

react-router-dom@6를 설치한다.

npm install react-router-dom

<BrowserRouter>
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/login' element={<Login />} />
    <Route element={<NotFound />} />
  </Routes>
</BrowserRouter>

파라미터와 쿼리: Params

Pramas는 **useParams** Hook을 사용한다.

// ----------- App.tsx ------------
<Route path=':id' element={<User />} />

// ----------- User.tsx -----------
const User: React.FC = () => {
    const { id } = useParams();

    return(
        <>
        {/* your code*/}
        </>
    )
}
// ...

**useLocation**을 사용하여 pathname을 받아올 수도 있다.

const { pathname } = useLocation();

useLocation 객체에는 query 정보를 가지고 있는 search가 있다.

const User: React.FC = () => {
    const location = useLocation();

    return( <div>{location.search}</div> );
}

/*
https://localhost:3000/?username=yoonki

location.search === '?username=yoonki';
*/

파라미터와 쿼리: Query

**qs** 라이브러리를 사용하면 string의 쿼리를 객체로 바꿔준다.

npm install qs

import qs from 'qs';

// ...
    const location = useLocation();
    const query = qs.parse(location.search, {
        ignoreQueryPrefix: true
    })

    query.username === 'yoonki1207'
// 쿼리의 파싱값은 문자열이다.
// ...

v6이상은 useSearchParams를 사용하면 라이브러리 없이 사용도 가능하다.

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

const [searchParams] = useSearchParams();  
const detail = searchParams.get('detail') === 'true';