[React JS] React Router v6

React Router Dom v6에 대한 설명 글

BrowserRouter vs createBrowserRouter

BrowserRouter

Switch를 이용했던 v5와 달리, v6는 Router를 이용한다.

return (
    <BrowserRouter>
      <Switch>
        <Route path="/Name/*">
          <Name />
        </Route>
        <Route path="/">
        <Main />
        </Route>
      </Switch>
    </BrowserRouter>
  );

v5의 Switch를 이용한 Router다. 이것은 아래와 같이 Router를 사용해 대체된다.

return (
    <BrowserRouter>
      <Header /> //Link를 사용한다면 BrowserRouter 안에 있어야 한다.
      <Routes>
        <Route path="/" element={<Main />}></Route>
        <Route path="/Name/*" element={<Name />}></Route>
      </Routes>
    </BrowserRouter>
  );

여기까지는 v5와 별반 다르지 않다. 다만 v6에는 다른 옵션이 있다.

createBrowserRouter

createBrowserRouter를 사용하면 아래와 같이 작성할 수 있다.
*index.jsx에도 createBrowserRouter를 작성해주어야 한다.

App.jsx->Root.jsx

import { Outlet } from "react-router-dom";
import Header from "./components/Header";

function Root() {
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
}

Router.jsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

이렇게 작성하면 App.jsx의 Outlet에는 주소에 따라 Router에 작성된 children 중 하나가 담기게 된다.

또한 Header는 페이지가 어떤 것이냐에 상관없이 모든 페이지에 렌더링 된다.
+) BrowserRouter와는 달리 Router.jsx안에 작성하지 않아도 Link 태그는 동작한다.

또한 Outlet은 Root 안에만 있을 필요가 없다.

그러므로 중첩라우팅과 같은 효과를 낼 수 있다(!)

errorElement

import NotFound from "./screens/NotFound";
import ErrorComponent from "./components/ErrorComponent";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "",
        element: <Home />,
        errorElement: <ErrorComponent />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
    errorElement: <NotFound />,
  },
]);

위와 동일한 코드에서 errorElement만 더해졌다. 이 경우 페이지가 문제를 일으킬 때, 설정된 ErrorComponent, NotFound 컴포넌트를 보여준다.
BrowserRouter 사용 시에도 적용할 수 있는데 아래와 같이 Route의 props로 작성된다.

<Route
  path="/properties/:id"
  element={<PropertyForSale />}
  errorElement={<PropertyError />}/>

useNavigate

function Header() {
  const navigate = useNavigate();
  const onAboutClick = () => {
    navigate("/about");
  };
  return (
    <header>
      <ul>
        <li>
          <Link to={"/"}>Home</Link>
        </li>
        <li>
          <button onClick={onAboutClick}>About</button>
        </li>
      </ul>
    </header>
  );
}

버튼 클릭 시에 about 페이지로 향하는 코드이다. navigate 함수를 이용해 간편하게 url을 변경할 수 있다.
v5의 Redirect와 비슷한 기능을 하는 것 같다. 아닌가?
추가적으로, useHistory의 역할을 대신할 수 있다. 아래와 같이 작성된다.

<>
  <button onClick={() => navigate(-2)}>
    Go 2 pages back
  </button>
  <button onClick={() => navigate(-1)}>
    Go back
  </button>
  <button onClick={() => navigate(1)}>
    Go forward
  </button>
  <button onClick={() => navigate(2)}>
    Go 2 pages forward
  </button>
</>

useHistory는 윈도우 히스토리를 이용해 앞과 뒤의 페이지로 이동하는 기능을 제공한다.

useParams

라우터 사용시에는 파라미터를 이용하게 된다. 예를 들어 Id에 맞추어 페이지를 렌더링 하는 경우가 그렇다. 이때 사용되는 것이 useParam인데, 그냥 url에 사용된 파라미터를 가져오는 함수이다.
예를 들어 url이 localhost:3000/user/{userId}라면 userId를 가져오는 식이다.
코드는 아래와 같다.

import { useParams } from 'react-router-dom';

const test = () => {
  let { params } = useParams();

반면에,파라미터가 아닌 pathname을 가져오고 싶은 거면 비슷한 함수인 useLocation을 사용하면 된다.