[react-router-dom] Router

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 />} />

location

history

links

social