React 12-1 Router v6 (v5와 다른 사용 방식)

Router v5의 예시

npm 다운은 버전을 명시하지 않으면 최신 버전으로 다운 받아지기 때문에 언급하지 않겠습니다.

 

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ToDoList from '../pages/ToDoList';
import LogIn from '../pages/LogIn';

function AppRouter(}) {

  return <Router>
    <Switch>
      <Route path="/login" >
        <LogIn />
      </Route>
      <Route path="/" >
        <ToDoList />
      </Route>
    </Switch>
  </Router>;
}

export default AppRouter;

 

 

Router v6의 예시

 - Router v6은 v5와 코드 작성하는 방식이 다르다. 다양한 함수에 pros를 넣는 것이 아닌 createBrowserRouter()를 활용하며 path는 v5과 동일하고 JSX만 선언하는 것이 아닌 element에의 value로 JSX를 선언한다.

   자신 페이지를 선언하고 싶으면 cahildren의 value로 배열은 선언하고 넣으면 된다.

   에러 발상 시 띄울 페이지는 errorElement의 value로 선언하면 된다.

 

예)

import { createBrowserRouter } from "react-router-dom";
import Root from './Root';
import Home from "./page/Home";
import NotFound from "./page/NotFound";
import User from './page/User';
import Followers from './page/Followers';

const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        children: [
            {
                path: "",
                element: <Home />,
            },
            {
                path: "user/:userId",
                element: <User />,
                children: [
                    {
                        path: "followers",
                        element: <Followers />,
                    }
                ]
            },
        ],
        errorElement: <NotFound />
    },
]);

export default router;

 

 

---

v6은 App.js가 아닌 index.js에 import

 - v6는 v5와 다르게 index.js에 선언해서 사용을 한다. 이때 reuter의 함수를 사용한다.

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

 

 - app.js은 뭘 할까? 가장 큰 틀이 된다고 생각하면 된다. 그리고 저는 사용하면서 app 보다는 root로 이름을 하는 것이 맞다고 생각해 바꾸었다. (이건 자유다.)

   그리고 사용 시 Ourlet을 사용해야 페이지들이 바뀌는 효과를 볼 수 있다.

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

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

export default Root;