React Router Dom V6 변경점-Switch, Route



 

리액트 라우터 돔이 V5에서 V6로 업그레이드 되면서 여러 변경점들이 생겼다.

이번에 새로 진행하는 프로젝트부터 V6를 사용하고 싶어서 큰 변경점들을 기록하려고 한다.

 

1. <Switch> → <Routes>

• 기존의 Switch가 Routes로 변경되었다.

// V5
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

// V6
// Switch 대신 Routes를 사용하는 모습
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

 

2. <Route>

• exact 옵션이 기본값이 되었다.

// V5
<Route exact path="/">
  <Home />
</Route>
     
// V6
// exact를 사용하지 않아도 된다.
<Route path="/" element={<Home />} />

 

• 따라서 exact를 제외하기 위해서는 주소에 *를 첨가해 주어야한다.

// V5
<Route path="/users">
  <Users />
</Route>

// V6
// exact를 사용하지 않은 대신 users 뒤에 *를 붙여서 users 다음 어떤 경로가 들어와도 포함하도록 한다.
<Route path="users/*" element={<Users />} />

 

• path가 기본적으로 상대 경로를 인식하도록 바뀌었다.

// V6
<Route path="users" element={<Users />}>
  <Route path="me" element={<OwnUserProfile />} />
  <Route path=":id" element={<UserProfile />} />
  // 이렇게 내부에서 사용된 경우에도 알아서 /users/me와 /users/:id로 인식한다.
</Route>

 

• component, render → element

// V5
<Route path='/user' component={UserInfo} />
<Route path='/user' render={routeProps => (
	<UserInfo routeProps={routeProps} isLogin={true} />
)} />

// V6
// element로 통일되었다.
<Route path="/user" element={<UserInfo />} />
<Route path="/user" element={<UserInfo isLogin={true} />} />