react-router-dom v5, v6 비교

안녕하세요.

이번에 회사에서 react-router-dom의 버전을 업그레이드하는 작업을 진행하면서 v5에서 사용하던 기능들이 v6에서 어떻게 변경되었는지 공유합니다.

1. Switch → Routes 변경

v5에서 사용하던 <Switch>가 <Routes>로 변경되었습니다.

// v5
<Switch>
    <Route path="" component={<Home />} />
</Switch>

// v6
<Routes>
    <Route path="" element={<Home />}/>
</Routes>

2. exact 옵션 삭제

<Route>속성 중, path가 정확히 일치할 때만 사용하는 exact 가 삭제되었습니다.

// v5
<Route path="/user" exact />

// v6
<Route path="user" />

3. component 방식 변경

v5에서 사용하던 component, render 속성이 element 속성으로 변경되었습니다.

// v5
<Route path="" component={<Home />} />
<Route path="" render={() => (
    <Home />
)} />
<Route path="">
    <Home />
</Route>

// v6
<Route path="" element={<Home />}/>

4. 중첩 라우팅 방법 변경

4.1 Basic

기존 v5와 동일하게 중첩라우팅을 사용할 수 있습니다. 여기서 차이점은 상위 path에 *가 추가되어야 합니다.

// v5
// App.js
<Switch>
    <Route path="/" exact>
        <Home />
    </Route>
</Switch>

// Home.js
<Switch>
    <Route path="/class" exact>
        <List />
    </Route>
</Switch>

=============================================

// v6
// App.js
<Routes>
    <Route path="/*" element={<Home />} />
</Routes>

// Home.js
<Routes>
    <Route path="list" element={<List />} />
</Routes>

4.2 Outet

중첩 라우팅에서 파일 별로 라우팅을 입력하지 않고, 최상위 파일에서 모든 중첩 라우팅을 적용하고, 해당 파일에서는 <Outlet />을 추가하여 중첩라우팅을 구현할 수 있습니다.

// v5
// App.js
<Switch>
    <Route path="/" exact>
        <Home />
    </Route>
</Switch>

// Home.js
<Switch>
    <Route path="/class" exact>
        <List />
    </Route>
</Switch>

=============================================

// v6
// App.js
<Routes>
    <Route path="/*" element={<Home />}>
        <Route path="list" element={<List />} />        
    </Route>
</Routes>

// Home.js
<Outlet />

4.3 Index Routing

해당 path의 기본 페이지로 적용할 수 있는 index 속성이 추가되었습니다.

<Routes>
    <Route path="/*" element={<Home />}>
        <Route index element={<Class />} />
        <Route path="list" element={<List />} />        
    </Route>
</Routes>

5. useHistory → useNavigate

페이지 이동시 사용하던 hooks인 useHistory가 useNavigate로 변경되었습니다.

history에 있는 다양한 함수를 통해서 페이지 전환을 했었는데, v6에서는 navigate 함수만으로 페이지 전환이 가능합니다.

// v5
const history = useHistory();

history.push('/');
history.go(1);
history.goBack();
history.goForward();

// v6
const navigate = useNavigate();

navigate('/');
navigate(1);
navigate(-1);
navigate(1);

6. <Prompt /> 삭제

v5에서 페이지가 전환될 때, message를 출력할 수 있는 컴포넌트였던 <Prompt />의 기능이 v6의 현재 버전(v6.0.2)에서는 사용할 수 없습니다.

 

Github issue 댓글에 의하면 v6 언젠가 추가될 것으로 보입니다.(https://github.com/remix-run/react-router/issues/8139#issuecomment-954425560)

// v5
return (
    <div>
        <Prompt message="페이지를 나가시겠습니까?" />    
    </div>
);

참고 사이트

더 자세한 내용을 아래 공식 사이트를 참고해주세요.

Declarative routing for React apps at any scale | React Router