"나의 일지"프로젝트(2)_페이지 구성 설계 및 리액트 라우트

"나의 일지"프로젝트는 다음과 같이 페이지 구성을 계획했다

홈페이지 1차 페이지 조직도

 

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import MainPage from "./pages/MainPage";
import ReportsPage from "./pages/ReportsPage";
import WritePage from "./pages/WritePage";
import LoginPage from "./pages/LoginPage";
import CreateUser from "./pages/CreateUser";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <MainPage />,
        path: "/",
      },
      {
        path: "/write",
        element: <WritePage />,
      },
    ],
  },
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "/join",
    element: <CreateUser />,
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider router={router}>
    <App />
  </RouterProvider>
);

 

App.js

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

function App() {
  return (
    <div className="App h-full">
      <div id="container" className="flex h-full">
        <NavBar />
        <Outlet />
      </div>
    </div>
  );
}

export default App;

 

App에서 Header, Footer등 고정적으로 보일 영역은 컴포넌트로 분리해서 넣어주고, 변경되는 페이지는 <Outlet>으로 처리해준다.

그러면 자동적으로 react-router-dom이 childern배열에 넣어둔 경로와 컴포넌트 대로 화면 전환을 해준다!

 

NavBar.jsx

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

export default function NavBar() {
  return (
    <header className="flex flex-col min-w-[200px]">
      <Link to="/">My App</Link>
      <ul className="flex flex-col gap-4">
        <Link to="/">Home</Link>
        <Link to="/write">write</Link>
      </ul>
    </header>
  );
}

라우트 이동은 react-router-dom 에서 제공하는 <Link to=""></Link> 컴포넌트를 이용해서 이동한다!

 

작동 영상