"나의 일지"프로젝트(4)_라우트 설정

먼저 리액드 라우팅을 위해 밑 라이브러리를 설치해주자

npm i react-router-dom

 

리액트 라우터를 사용하기 위해서는 당연하겠지만 라우팅으로 이동할 페이지들이 필요하다 

미리 리포트를 쓰기위해 write, 보기 위한 view,  수정하기 위한 fix 라는 페이지들을 만들어 두었다

 

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 WritePage from "./pages/WritePage";
import LoginPage from "./pages/LoginPage";
import CreateUser from "./pages/CreateUser";
import ViewReport from "./pages/ViewReport";
import FixReportPage from "./pages/FixReportPage";

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


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

로그인 및 회원가입 페이지는 리포트들은 로그인 정보에 따라 App 컴포넌트에 접속 차단하기 위해 따로 분리해 두었고

App 컴포넌트 하위로 메인 페이지, 작성 페이지, 조회 페이지, 수정 페이지를  배열로 묶어 children에 전달하고

그중 메인 페이지는 path 경로를 "/"로 주었다

 

App.js

import { Outlet } from "react-router-dom";
import NavBar from "./components/NavBar";
import { useEffect } from "react";
import { onUserStateChanged } from "./api/firebase";
import { useNavigate } from "react-router-dom";
import { getUserDate } from "./api/firestore";
function App() {
  const navigate = useNavigate();

  useEffect(() => {
    onUserStateChanged((user) => {
      if (!user) {
        navigate("/login");
      } else {
        getUserDate(user);
      }
    });
  }, [navigate]);
  
  return (
    <div className="App w-full">
      <div id="container" className="flex relative justify-start">
        <NavBar />
        <Outlet />
      </div>
    </div>
  );
}

export default App;

children 페이지들은  <Outlet />에 해당이 되고 리우팅될동안 변하지 않는 네이게이션(헤더) 영역과 풋터는 APP 컴포넌트에 따로 지정을 해준다