리액트 강의를 완강하고, 지금까지 배운 내용을 토대로 연습삼아 이것 저것 만들어보던 중에, react router 사용법이 계속 헷갈려서 기록하게 되었다.

원래 기존에 강의에서 배운 방법과 react dom 공식 사이트에서 알려주는 방법이 달라서 그 2가지 모두 작성해보기로 하였다.

• 공식 사이트 : https://reactrouter.com/ko/main

📌react-router-dom 설치하기

https://reactrouter.com/ko/main/start/tutorial#setup

npm install react-router-dom

react 프로젝트 경로의 위치에서 설치 시작하기.

📌 강의에서 배운 방법

• BrowserRouter와 Routes, Route를 사용한 방법이다.

/src/main.jsx

• 최상위 컴포넌트 BrowserRouter로 감싸주기

import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

/src/routes.js

• routes.js 파일에 route 세팅

import CreatePage from "./pages/CreatePage";
import EditPage from "./pages/EditPage";
import HomePage from "./pages/HomePage";
import ListPage from "./pages/ListPage";
import ShowPage from "./pages/ShowPage";

const routes = [
    {
        path: "/",
        component: HomePage,
    },
    {
        path: "blogs",
        component: ListPage,
    },
    {
        path: "/blogs/:id",
        component: ShowPage,
    },
    {
        path: "/blogs/create",
        component: CreatePage,
    },
    {
        path: "/blogs/edit",
        component: EditPage,
    },
];

export default routes;

/src/App.jsx

• routes.js 파일을 import해서 map으로 뿌려주기.

import { Routes, Route } from "react-router-dom";
import routes from "./routes.js";

function App() {
    return (
        <>
            <Routes>
                {routes.map((route) => {
                    return (
                        <Route
                            path={route.path}
                            element={<route.component />}
                            key={route.path}
                        ></Route>
                    );
                })}
            </Routes>
        </>
    );
}

export default App;

📌 공식 사이트에서 알려주는 방법

• createBrowserRouter, RouterProvider 를 사용한 방법이다.
• 검색을 좀 해보니, 이 방법은 6.4버전에서 추가된 방식이라고 한다.
• 이전에 사용했던 방법보다는 map을 사용하는 과정이 빠져서 그런지 아주 많이 간편해진거 같다.

기본

/src/routes.jsx

• routes.jsx 파일에 route 세팅

import List from "./pages/List";
import Edit from "./pages/Edit";
import Write from "./pages/Write";

const routes = [
    { path: "/", element: <List /> },
    { path: "/edit", element: <Edit /> },
    { path: "/write", element: <Write /> },
];

export default routes;

/src/App.jsx

• 브라우저 라우터를 생성 하고, 경로를 구성하면 라우팅이 활성화 됩니다.

import "./App.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import routes from "./routes";

function App() {
    const router = createBrowserRouter(routes);
    
    return <RouterProvider router={router} />;
}

export default App;

중첩과 에러

• 중첩되는 경로를 설정해줄 때에는 children 옵션을 사용하면 된다.

/src/routes.jsx

• Layout이라는 jsx 파일을 생성하고, 최상위에 연결해주었다.
• 에러의 경우 최상위 루트에 errorElement 옵션을 사용하여 설정하였다.

import Layout from "./Layout";
import ErrorPage from "./pages/ErrorPage";
import ListPage from "./pages/ListPage";
import EditPage from "./pages/EditPage";
import WritePage from "./pages/WritePage";
import ViewPage from "./pages/ViewPage";

const routes = [
    {
        path: "/",
        element: <Layout />,
        errorElement: <ErrorPage />,
        children: [
            { path: "/", element: <ListPage /> },
            { path: "edit", element: <EditPage /> },
            { path: "write", element: <WritePage /> },
            { path: "view/:id", element: <ViewPage /> },
        ],
    },
];

export default routes;

/src/Layout.jsx

• 하위 경로를 렌더링할 위치를 루트 경로에 알리기 위해 Outlet을 사용한다.

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

const Layout = () => {
    return (
        <div id="wrap">
            <header id="header">header</header>
            <Outlet /> // Outlet 사용
            <footer id="footer">footer</footer>
        </div>
    );
};

export default Layout;