React Router v6 업데이트, 바뀐점

 

 

멋사 프론트엔드 과정을 종료하고 리액트를 따로 공부해야 될 거 같아 애플코딩님의 강의를 듣던 중 강의에서 라우터 관련해서 강의대로 했음에도 안 되는 부분들이 몇 가지 있어 찾아보던 중에 react-router 가 업데이트하면 문법이 조금 바뀐 걸 알게 되었다. 아직 리액트 자체가 입문 수준이라 몇 가지만 정리하기로 했다.

 

 

 

Switch

<Switch>로 감싸진 <Route>들중에 가장 먼저 매칭 된  <Route> 하나만 보여준다.

 

• Routes 는 Switch의 대체로 나왔는데 Switch 와 다르게 가장 일치하는 항목을 기반으로 선택된다.
• component , render 에 화살표 함수를 사용하지 않는다. element 속성에 JSX 컴포넌트를 전달할 수 있다.
• Router 에 component , children 대신 element를 사용
• Route 는 Routes 의 직속 자식이어야 한다.
• exact가 기본값으로 되어있다.

 

---

 

 

기존

 <Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/users">
    <Users />
  </Route>
</Switch>

 

 

업데이트후

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="users/*" element={<Users />} />
</Routes>

 

 

 

---

 

 

• useRouterMatch() 없이 상대 경로를 사용할 수 있게 되었다
• useRouteMatch는 match객체의 값에 접근할 수 있게 해주는 훅(hook)이다.

 

 

기존

const match = useRouteMatch();
// 현재 url : '/'
<Link to={match.url} />; // 현재 url 
<Link to={`${match.url}/blog`}>; // 현재 url + /blog 로 이동

<Route path={match.patch} />
<Route path={`${match.patch}/about`} />

 

 

업데이트후

<Link to="" />; // 현재 페이지로 이동
<Link to="blog">; // 현재 url에 /blog 로 이동 

<Route path="" />
<Route path="blog" />

 

 

<Outlet />

•  최상단의 <Routes> 내에서 모든 라우팅 구조를 중첩 가능하다.

 

 

기존

App.js

	<Route path="/blog/:id" component={BlogPage} />
    
BlogPage.js

	<Route path="/blog/:id" component={BlogMain} />
	<Route path="/blog/:id/detail" component={Detail} />

 

 

 

업데이트후

App.js

<Route path="/blog/:id/*" element={<BlogPage />}>
  <Route path="" element={<BlogMain />} />
  <Route path="detail" element={<Detail />} />
</Route>


BlogPage.js

<Outlet />

 

 

 

---

 

 

 

아직 기본적인 문법 구조만 사용해서 모르는 내용도 있고 공부해야 할 내용들도 많다 이외에도 업데이트 내용들이 더 있으며 실직적으로 공부하면서 사용해가며 익혀 나가야 할거 같다.!

 

 

 

 

 

업데이트 참고 내용

https://reactrouter.com/docs/en/v6/upgrading/v5#advantages-of-route-element

React Router | Upgrading from v5

 

 

 

 

https://github.com/chry8822

chry8822 - Overview

 

 

 

 

---