React - react-router-dom v6 변경된 점 알아보기

react 강의를 학습하면서 최근에 제일 많은 차이점이 발생한 것이 router-dom으로 보였다. 5버전과 6버전간에 버전 차이도 꽤 크고 사용법이나 사라진 컴포넌트 함수등이 발생해서 차이점을 알아보고자 한다.

 

React Router Dom V6

react-router-dom 6.4 설치

npm i react-router-dom@6.4

 

 

BrowseRouter, Routes, Route 기본적인 구조

- Router.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import About from "./screen/About";
import Home from "./screen/Home";

function Router() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

v5와 달라진점

1. Switch대신 Routes를 사용한다.

2. Route 컴포넌트 element prop에 컴포넌트 명을 입력한다.

 

 

createBrowserRouter

기존 v5와 비슷하게 생긴 BrowseRouter를 사용하여 라우터 표현을 해도 되지만, 아주 새로운 방식으로 라우터를 작성할 수 있다.

 

Router.tsx

import { createBrowserRouter } from "react-router-dom";
import About from "./screen/About";
import Home from "./screen/Home";
import Root from "./Root";

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

export default router;

JSX문법 형태로 사용하지 않는다.

createBrowserRouter 함수 파라미터에 Router를 array형태로 표현한다.

 

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import Router from "./Router";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <RouterProvider router={Router} />
  </React.StrictMode>
);

먼저 RouterProvider를 index.tsx에서 추가해주고 router prop에 생성한 Router 함수를 넣어준다.

 

Root.tsx

import React from "react";
import { Outlet } from "react-router-dom";

function Root() {
  return (
    <div>
      <h1>Root입니다.</h1>
      <Outlet />
    </div>
  );
}

export default Root;

또한 Root에서 자식노드를 보여줄 수 있도록 최상단 부모에서 Outlet을 선언해준다.

Outlet덕에 자식 컴포넌트가 표현되어 Home이 보인다.

About경로도 잘 노출이 된다.