[React] React 중첩 롸우팅 (react-router-dom v5)

중첩 롸우팅

중첩 롸우팅이란 해당 페이지에서 좀 더 구체적으로 화면을 교체할 필요가 있을 때 사용한다.

예를 들어, /about을 url로 갖는 페이지에서 특정 컴포넌트를 클릭하면 화면이 바뀌면서 /about/1 로 url도 변경되는 것이다.

사용법

react-router-dom v5 설명 사이트

1️⃣ 부모 url을 가져오기

자식 컴포넌트에서 useRouteMatch()로 부모 url을 가져온다.

function Child({id}){
	let match = useRouteMatch();
}

2️⃣ Link 설정하기

function Child(){
	let match = useRouteMatch();
  
  	return (
      <Link to={`${match.url}/1`}>
		<div>1</div>
	  </Link>

	  <Link to={`${match.url}/2`}>
		<div>2</div>
	  </Link>
      
    )
}