React ~ 중첩 라우터 관리 (23/03/16)

/board/list
/board/write
/board/view/1
/board/modify/1
/board/delete/1

리액트 라우터 관리를 위한 팁

[routes/AppRouter.jsx]

import { Routes, Route } from "react-router";
import { Main, Login, Logout } from "../pages";
import { BoardRouter } from "./BoardRouter";

export const AppRouter = () => {
  return (
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/login" element={<Login />} />
      <Route path="/logout" element={<Logout />} />
      <Route path="/board/*" element={ <BoardRouter />} />
    </Routes>
  );
};

[routes/BoardRouter.jsx]

import { Routes, Route } from "react-router-dom";
import { BoardList, BoardView, BoardWrite } from "../pages";

export const BoardRouter = () => {
  return (
    <Routes>
      <Route path="" element={<BoardList />} />
      <Route path="write" element={<BoardWrite />} />
      <Route path="view/:id" element={<BoardView />} />
    </Routes>
  );
};