exact 옵션 삭제

기존의 / 라우트의 경우 React Router의 디폴트 매칭 규칙 으로 인해 앞부분만 일치해도 전부 매칭 되기때문에 정확히 라우트를 일치시키고자 exact 속성을 사용하였으나 v6부터 기본적으로 정확히 일치하도록 매칭 규칙이 변하여 v6에서부터는 exact 의 옵션을 더 이상 사용하지 않습니다.

만약 하위경로에 여러 라우팅을 매칭시키고 싶다면 다음과 같이 URL 뒤에 * 을 사용하여 일치 시킬 수 있습니다.

// categores 로 시작되는 모든 라우팅 매칭
<Route path='categories/*' />
// categores 로 시작되는 라우팅만 매칭
<Route path='categories/' />

react-router-dom v5.x.x 사용 시

// categores 로 시작되는 모든 라우팅 매칭
<Route path='categories/' />
// categores 로 시작되는 라우팅만 매칭
<Route path='categories/' exact={true} />

간편해진 중첩 라우팅

react-router-dom v6에서 nested routes를 구현하는 방법은 두 가지가 있습니다. 그 중 한 가지 입니다.

부모 <Route>의 path 마지막에 /*를 적어 명시적으로 이 <Route>의 내부에서 nested route(중첩 라우터)가 render 될 수 있음을 표시하고 자식 <Route>를 부모 <Route>의 element 내부에 작성하는 방법입니다.

또한 <Switch> 가 <Routes> 로 바뀌었 습니다.

// Router.tsx

<Routes> // == Switch
	<Route path="/:coinId/*" element={<Coin/>} />
	<Route path="/" element={<Coins/>} />
</Routes>

// Coin.tsx

<Routes> // == Switch
	<Route path="chart" element={<Chart />} />
	<Route path="price" element={<Price />} />
</Routes>

react-router-dom v5.x.x 사용 시

// Router.tsx

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

// Coin.tsx

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