리액트 레이아웃 적용하기

https://sosohanya.tistory.com/116

[React] Layout / Contents 컴포넌트 분리

위글 처럼 하면된다

 

layout.js

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

function LayoutCompo() {

    return (
        <div>
            <HeaderCompo/>
            <Outlet/>
        </div>
    )
}
export default LayoutCompo;

app.js

import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import LayoutCompo from "./component/layout/LayoutCompo";
import Main from "./pages/Main";
import PlusProductPage from "./pages/PlusProductPage";
import PlusTimePage from "./pages/PlusTimePage";
import ReservationDetailPage from "./pages/ReservationDetailPage";
import ReservationPage from "./pages/ReservationPage";
import ReservationProPage from "./pages/ReservationProPage";

function App() {
  return (

    <Router>
      <Routes>
        <Route path={"/"} element={<LayoutCompo />} >
          <Route path="seat/:floor/floor" element={<ReservationPage />}></Route>
          <Route path="pro/:seatId" element={<ReservationProPage />}></Route>
          <Route path=":reservationId/ReservationDetailPage" element={<ReservationDetailPage />}></Route>
          <Route path="" element={<Main />}></Route>
          <Route path="product/:reservationId/plus" element={<PlusProductPage />}></Route>
          <Route path="time/:reservationId/plus" element={<PlusTimePage />}></Route>
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

제일 상위 라우트에 레이아웃컴포넌트를 주면된다

<Route path={"/"} element={<LayoutCompo />} >