인프런 커뮤니티 질문&답변

react-router v7을 설치하고 다음과 같이 수정하여 처리하였습니다.

function MainLayout() {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout>
        <Sider collapsible>
          <div className="logo" style={logoStyle} />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['m1']}>
            <Menu.Item key="m1">설문조사관리</Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: 'white' }}>HEADER</Header>
          <Content>
            <Outlet /> {/* chidren 대신 아울렛 사용 */}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route index element={<h1>Home Page</h1>} />
          <Route path="list" element={<ListPage />} />
          <Route path="builder" element={<BuilderPage />} />
        </Route>
      </Routes>
    </>
  );
}