라우팅: ReactRouter의 <Outlet>

https://reactrouter.com/en/main/components/outlet

 

1. <Outlet/> 컴포넌트에 어떤 것이 렌더링 될까?

• 만약 현재 URL이 "/messages"라면 <DashboardMessages> 컴포넌트가 렌더링됩니다.
• 현재 URL이 "/tasks"라면 <DashboardTasks> 컴포넌트가 렌더링됩니다.
• 만약 현재 URL이 "/" (루트)라면 아무것도 렌더링되지 않습니다(null).

<Outlet> 컴포넌트를 사용하여 현재 URL에 따라 다른 컴포넌트를 동적으로 렌더링할 수 있다.

React Router의 중첩 라우트 구조를 사용하여 경로에 따라 다른 컴포넌트를 렌더링할 수 있다.

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

 

 

2. 로그인한 유저(인증된 유저)만 특정 컴포넌트를 보여주고 싶을 때

• 로그인, 회원가입 페이지에서는 Layout 컴포넌트가 렌더링되지 않는다!

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "home",
        element: <Home />,
      },
      {
        path: "profile",
        element: <Profile />,
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/create-account",
    element: <CreateAccount />,
  },
]);