react-router V6

리액트 라우터 V6

공식문서: https://reactrouter.com/docs/en/v6/upgrading/v5

v5 =>v6 마이그레이션 해보면서 익혀보도록 하자.

1. Route 속성값 변경

• 기존 Route에 children, component => element로 변경
• 가 사라짐 '*' 로 서브라우팅을 구현 할수 있음

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

2. Switch => Routes로 변경

기존 Switch 컴포넌트로 감싸던걸 Routes 컴포넌트로 변경을 하면 된다.

v5

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

v6

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

3. useHistory => useNavigate로 변경

기존 페이지이동을 위해서 사용하던 useHistory를 useNavigate를 사용하면된다.
useNavigate는 함수라는걸 기억!

v5

function App() {
  let history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

v6

  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );

뒤로가기 할때는 인자값으로 -1, -2 이런식으로 표현 하면 된다.

example

<button
	onClick={() => {
		navigate(-1);
   }}
>
	Go Back
</button>

4. useRouteMatch가 사라짐

useRouteMatch로 상대경로를 설정을 했었는데 자동적으로(?) 상대경로를 설정가능해졌다.

v5

function Users() {
  let match = useRouteMatch();

  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>
  );
}

v6

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>
  );
}

주의점은 '/'를 제외하고 라우팅을 해야 상대경로로 라우팅이 가능해짐. (/me 이런식으로 이동하면 절대경로로 /me page로 이동함)

5. Outlet 컴포넌트로 서브라우트를 구현가능

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>
  );
}