이동하는 방법은 특정없이 경로를 렌더링하는 일부 구성 요소에 대응?

이 SideBar 고 TopBar 나의 일부분"layout",그리고 당신이 원하는 다른"layout"를 위해 특별히"/로그인"을 추상화하는 컨테이너 구성 요소로 레이아웃을 구성 요소입니다. 각각의 레이아웃 컨테이너를 렌더링해야 하는 Outlet 에 대한 각각의 중첩된 노선이 있습니다.

const AppLayout = () => (
  <Container>
    <Sidebar />
    <Content>
      <Topbar />
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

const LoginLayout = () => (
  <Container>
    <Content>
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<AppLayout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<UserList />} />
          <Route path="users/:id" element={<User />} />
          <Route path="newUser" element={<NewUser />} />
          <Route path="products" element={<ProductList />} />
          <Route path="products/:id" element={<Product />} />
          <Route path="newProduct" element={<NewProduct />} />
        </Route>
        <Route path="/login" element={<LoginLayout />}>
          <Route index element={<Login />} />
        </Route>
      </Routes>
    </Router>
  );
}