Comment aller de l'itinéraire spécifique, sans le rendu de certains composants de Réagir?

Question 1

Je suis à l'aide de react-router-dom v6. Je veux que mon Login page pour être rendu sans le Sidebar et Topbar des composants. Comment faire?

function App() {
  return (
    <Router>
      <Container>
        <Sidebar />
        <Content>
          <Topbar />
          <MainContent>
            <Routes>
              <Route path="/" 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 path="/login" element={<Login />} />
            </Routes>
          </MainContent>
        </Content>
      </Container>
    </Router>
  );
}

Je ne veux pas que ma page de connexion à restituer à l'intérieur de la MainContent mais en prenant toute la page sans Sidebar et Topbar.

J'ai essayé de déplacer le Routes supérieure et ont la connexion route au-dessus de la barre latérale, mais il y a une erreur Error: [Sidebar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Question 2

Depuis SideBar et TopBar semblent faire partie d'une "mise en page", et vous souhaitez une autre "mise en page" pour "/login" puis-je suggérer l'abstraction de l'contenant des composants dans des éléments de mise en page. Chaque conteneur de présentation doit rendre un Outlet pour leur respective imbriqués les routes.

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>
  );
}

Drew Reese · Answer 1 · 2021-11-24T01:47:40

Depuis SideBar et TopBar semblent faire partie d'une "mise en page", et vous souhaitez une autre "mise en page" pour "/login" puis-je suggérer l'abstraction de l'contenant des composants dans des éléments de mise en page. Chaque conteneur de présentation doit rendre un Outlet pour leur respective imbriqués les routes.

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>
  );
}

Comment aller de l'itinéraire spécifique, sans le rendu de certains composants de Réagir?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie