중첩 라우팅 / router hook

https://velog.io/@yiyb0603/React-Router-dom의-유용한-hooks들

React Router dom의 유용한 hooks들 📃

import React, {useEffect, useState} from 'react'

import { Switch, Route, useLocation, useParams, Link, useRouteMatch} from 'react-router-dom'



function Coin() {
    const {coinId} = useParams<Params>();
    const { state } = useLocation<RouteState>();
    const priceMatch = useRouteMatch("/:coinId/price");    
    const chartMatch = useRouteMatch("/:coinId/chart");

    return (

                <>
                    ...
                    <Switch>
                        <Route path={`/:coinId/price`}>{/* `/${coinId}/price` */}
                            <Price/>
                        </Route>
                        <Route path={`/:coinId/chart`}>
                            <Chart/>
                        </Route>
                    </Switch>
    )
}

export default Coin

기존 Router를 사용하던 방법과 같이 <Switch> 컴포넌트 안에 만들게 되며 작성방법은 똑같이 작성하면 됩니다.

React-router v5를 사용해서 현재 버전과는 조금 차이가 있을 수 있습니다!

 

여기서 중요한점은 Router-dom hook을 사용하여 데이터를 활용하는 것입니다.

 

useParams : 주소창으로 파라미터 값을 받을 수 있다 여러개를 넘길 수 있지만 대칭시켜야하기 때문에 적당히 넘기는게 좋다고 생각합니다

<Route path="/:coinId">
		<Coin/>    
</Route>

 

useLocation : 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks입니다. 이러한 값들은 앵커 역할을 하는 Link를 통해 넘길 수 있으며 해당 Route로 이동하여 사용할 수 있습니다

 

<Link to={{
	pathname:`/${coin.id}`,
	state: {name:coin.name},
}}>

const { state } = useLocation<RouteState>();

 

useRouteMatch : 현재 Route가 입력한 Route인지를 비교하고 일치하면 데이터를 출력합니다. 만약 현재 있는 Route가 입력한 Route가 아닌 다른 루트에 있는 경우는 null을 출력하게 되고 일치한다면 아래와 같은 정보를 출력해줍니다.

const priceMatch = useRouteMatch("/:coinId/price");
const chartMatch = useRouteMatch("/:coinId/chart");

const {coinId} = useParams<Params>();
const { state } = useLocation<RouteState>();
const priceMatch = useRouteMatch("/:coinId/price");
const chartMatch = useRouteMatch("/:coinId/chart");