react-router-dom 버전6 변경 사항

기본 설정 방법

https://sumni.tistory.com/229

React Router Dom 설정(버전 5.x, 6링크)

 

버전 6 변경 사항

1. 라우트 설정 방법

이전 버전에서는 <Route> 컴포넌트를 사용하여 경로와 컴포넌트를 매핑했습니다. 버전 6에서는 <Route> 대신 <Routes>를 사용하여 라우트를 정의합니다. 이제 각 경로에 대한 element 속성을 사용하여 해당 경로에 렌더링할 컴포넌트를 지정합니다.

예전 버전 (버전 5.x)

<Route exact path="/login" component={LoginPage} />
//or
<Route path="/login">
 <LoginPage />
</Route>

버전 6

<Routes>
	<Route exact path="/" element={<LoginPage />} />
</Routes>

 

2. Switch 삭제

버전 6에서는 <Switch> 컴포넌트가 삭제되었습니다. 대신 <Routes> 컴포넌트 내에서 위에서 아래로 순서대로 라우트가 평가되며, 첫 번째 일치하는 라우트가 렌더링됩니다.

 

예전 버전 (버전 5.x)

<Router>
  <Switch>
    <Route exact path="/login" component={LoginPage} />
    <Route exact path="/logout" component={LoginOutPage} />
  </Switch>
</Router>

버전 6

<Router>
    <Routes>
        <Route exact path="/login" element={<LoginPage />} />
        <Route exact path="/logout" element={<LoginOutPage />} />
    </Routes>
</<Router>

3. 라우트 등록 방식

라우트 등록 방식도 변경되었습니다. 이전 버전에서는 Route 컴포넌트를 사용하여 중첩된 라우트를 설정했습니다. 버전 6에서는 중첩된 라우트를 <Routes> 컴포넌트 내에서 설정합니다.

예전 버전 (버전 5.x)의 중첩된 라우트

<Route path="/parent" component={ParentComponent}>
  <Route path="/child" component={ChildComponent} />
</Route>

버전 6에서 중첩된 라우트의 설정 방식

<Routes>
  <Route path="/parent" element={<ParentComponent />}>
    <Route path="/child" element={<ChildComponent />} />
  </Route>
</Routes>