react-router-dom v6 <Outlet> 적용해보기

 

Outlet v6.6.0

하위 경로 요소를 렌더링하려면 상위 경로 요소에서 <Outlet>을 사용해야 합니다. 이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있습니다. 상위 경로가 정확히 일치하면 하위 경로를 렌더링하거나 경로가 없으면 아무것도 렌더링하지 않습니다.

//App.tsx

import { Route, Routes } from "react-router-dom";


function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <div className="App">
          <Routes>
            <Route path="/login" element={<LogInPage />}></Route>
            <Route path="/signup" element={<SignUpPage />}></Route>
            <Route path="/" element={<MainPage />}></Route>
            <Route element={<Mypage />}>
              <Route path="/mypage">
                <Route index element={<Order />} />
                <Route path=":id" element={<OrderDetail />} />
                <Route path="cancel-call/:id" element={<CancelDetail />} />
              </Route>
              <Route path="wish" element={<Wish />} />
              <Route path="cancel">
                <Route index element={<Order />} />
                <Route path=":id" element={<OrderDetail />} />
              </Route>
            </Route>
          </Routes>

          <ReactQueryDevtools />
        </div>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

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

const MyPage = () => {
  return (
    <>
      {isLogin && (
        <MypageWrap>
          <Nav>
            <AsideNav />
          </Nav>
          <Section>
            <UserHeadInfo />
            <Outlet />
          </Section>
        </MypageWrap>
      )}
    </>
  );
};
export default MyPage;