exact, Switch
v5
아래의 소스코드를 바탕으로 경로를 / 로 이동할 경우 Main, Water, Juice 컴포넌트 3개가 전부 렌더링된다. Route는 경로가 부분적으로 일치하는 컴포넌트도 렌더링하는 특성을 가지고 있기 때문이다. 의도치 않은 렌더링을 위해 exact를 사용한다.
<Router>
<Route path="/" component={Main} />
<Route path="/water" component={Water} />
<Route path="/juice" component={Juice} />
</Router>
의도치 않은 렌더링을 위해 exact를 사용한다.
<Router>
- <Route path="/" component={Main} />
+ <Route exact path="/" component={Main} />
<Route path="/water" component={Water} />
<Route path="/juice" component={Juice} />
</Router>
존재하지 않는 URL로 이동하는 것을 처리하기 위해 아래 처림 넣으면 결과는 모든 URL에서 PageNotFound 컴포넌트를 render한다.
<Router>
<Route exact path="/" component={Main} />
<Route path="/water" component={Water} />
<Route path="/juice" component={Juice} />
+ <Route component={PageNotFound} />
</Router>
Switch 태그를 사용하여 감쌀 경우, 경로와 일치하는 컴포넌트를 하나만 렌더링하게 된다. exact path 와 다른 점은 첫번째 매칭만 본다는 것이다. 경로의 일치 검사는 '/' 'water' 'juice' 순으로 위에서 아래로 순차적으로 진행하게 된다. 그렇기 때문에 Switch 태그를 사용할 경우에는 Route의 순서에 유의하여 사용하여야 한다.
<Router>
<Switch>
<Route exact path="/" component={Main} />
<Route path="/water" component={Water} />
<Route path="/juice" component={Juice} />
<Route component={PageNotFound} />
</Switch>
</Router>
v6
\<Route exact > 제거 대신 하위 route가 있는 route(다른 component에서 정의된)는 route에 *을 사용하여 deeply match를 나타냄
Switch 제거
\<Route> 의 순서가 영향을 끼치지 않는다. 자동으로 best route를 감지한다.
<Router>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/water" element={<Water />} />
<Route path="/juice" element={<Juice />} />
<Route path="users/*" element={<Users />} />
<Route element={<PageNotFound />} />
</Routes>
</Router>
props
참고
match
// v5
export const Profile = ({ match }) => {
// v5에선 파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조했었습니다
const { username } = match.params;
}
<Route path="/profiles/:username" component={Profile} />
// v6
import { useParams } from 'react-router-dom';
const Profile = () => {
const { username } = useParams();
}
<Route path="/profiles/:username" element={<Profile />} />