[🐾 일지] react-router-dom v6

내가 작년 12월에 팀플 할 때까지만 해도 이게 잘 먹혔다.

 

<div>
    <Route exact path="/" component={Home}/>
    <Route exact path="/about" component={About}/>
</div>

 

역시나 react-router-dom을 설치한 뒤에 저렇게 쓰니깐.. 안되네..?

 

(◕‿◕)

 

<Router>로 embed를 안 해주어서 그런가 하고 공식 문서를 찾아보니 역시나 프로그래밍 세상은 너무나 빨리 변한다.

조금만 관심갖지 않으면 바로 나가리 ʕ •ᴥ•ʔ

 

react-router-dom@v6 에서는 저 방법이 먹히지 않고 다음과 같이 해 주어야 한다.

 

	<div>
            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </div>

 

내가 깨달은 것들
✅ <Routes> 꼭 있어야 함
✅ component -> element

 

 

---

 

이거 말고 공식문서를 돌아다녀 보니 눈에 띄게 바뀐 것들만 아래에 정리해보도록 하겠다. 

공식문서 증후군 있는 당신들을 대신 내가 후훗

 

 

✓ <Switch> 태그 안에 <Redirect> 태그 사용 X -> <Redirect>를 <Route>를 랜더링해서 사용해야 한다.

 

# v5 
<Switch>
    <Redirect from ="about" to "about-us"/>
</Switch>

# v6
<Switch>
    <Route path ="about" render={()=><Redirect to ="about-us"/>}/>
</Switch>

 

 

✓ <Switch> 대신 <Routes> 사용 권장 : 훨씬 powerful하고 버그가 덜 생긴다고 함.

나는 이걸 예전부터 알고 진작에 <Routes>를 썼지! 사실 그냥 책에 나와있었음.

 

 

✓ <Route> 태그 사이에 component 태그 껴 놓는거 안됨. 무조건 한 줄로 element 사용해서 쓰셈.

나처럼 애 먹지 말구..^^

 

 

✓ match.url, match.path 이제는 안 씀.

우리 이제 nesty한 코드 못 쓰게 할 거임. 이렇게 느껴지는데..

만약에 /users 경로에 있는 홈페이지 안에서 user profile 같은 개인 id를 덧붙여서 들어가는 경로(/users/id)에 해당되는 말이다.

이제 다음과 같이 깔끔하게 써주면 됨.

 

# v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

 

아니 근데, 아래랑 같이도 되는듯? 공식문서에 따로 설명이 되어 있길래..╮ (. ❛ ᴗ ❛.) ╭

 

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

 

App.js에서 path="/users" -> path="users/*" 라고 쓴 후에 해당 컴포넌트 코드에 깔끔하게 <Link>랑 <Route> 이용해서 경로 설정하면 된다. 원래는 아래와 같이 <Switch>, match 쓰는 더러운 코드였으니 발전 ㅇㅈ..

 

# v5
function Users() {
  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <OwnUserProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <UserProfile />
        </Route>
      </Switch>
    </div>
  );
}

 

 

✓ <Route>내에서 이동하는 component의 props를 설정하고 싶을 때, 이젠 render 대신에 element에서 하렴!

 

# v5
<Route
  path=":userId"
  children={({ match }) => (
    match ? (
      <Profile match={match} animate={true} />
    ) : (
      <NotFound />
    )
  )}
/>

 

# v6
<Route path=":userId" element={<Profile animate={true} />} />

function Profile({ animate }) {
  let params = useParams();
  let location = useLocation();
}

 

확실히 가독성이 좋아지기는 한 것 같다. 

 

 

✓ <Route path>에서의 placeholder는 dynamic :id 스타일이랑 * 만 지원한다.

?, -* 이런거 이제 안됨.

<되는 것>
/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

<안 되는 것>
/users/:id?
/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

 

 

✓ react-router-config 대신 useRoutes 쓸 것.

 

 

✓ useHistory 대신 useNavigate 쓸 것. 오 이건 좀 꿀팁? useHistory 종종 썼었는뎅

 

 

 

대충 자주 쓰는 것들만 대해 정리를 해봐도 8가지나.. v5에서 v6 업데이트 엄청 된 것 같다. 오늘도 정신 차리자 홧팅 ʕ￫ᴥ￩　ʔ

 

👇🏻 공식문서

https://reactrouter.com/docs/en/v6/upgrading/v5#backwards-compatibility-package

React Router | Upgrading from v5