ยังไงต้องไปเจาะจงเส้นทางโดยไม่มีการแสดงผลบางส่วนประกอบในตอบโต้?

Question 1

ฉันใช้ react-router-dom v6. ฉันต้องการของฉัน Login หน้าเพื่อเป็นค่าการแสดงผลไม่มี Sidebar แล้ว Topbar ส่วนประกอบ วิธีที่จะทำมัน?

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

ฉันไม่ต้องการการล็อกอินหน้าที่จะจัดการพาข้างใน MainContent แต่เอาตลอดหน้าโดยไม่ต้อ Sidebar แล้ว Topbar.

ฉันพยายามเคลื่อนที่ Routes สูงและมีการล็อกอิน route อยู่เหนือแถบข้างด้าแต่นั่นคือการเกิดข้อผิดพลาด Error: [Sidebar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Question 2

ตั้งแต่ SideBar แล้ว TopBar ปรากฏว่าเป็นส่วนหนึ่งของเป็น"ผังแป้นพิมพ์"และคุณต้องการที่แตกต่างกั"ผังแป้นพิมพ์"เป็นพิเศษสำหรับ"/ล็อกอิ"จากนั้นฉันแนะนำให้ abstracting ตู้คอนเทนเนอส่วนประกอบเข้าไปในผังแป้นพิมพ์ส่วนประกอบ แต่ละการจัดวางตู้คอนเทนเนอร์ควรจะจัดการพาน Outlet สำหรับพวกเขา respective รอบการเส้นทาง.

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

ตั้งแต่ SideBar แล้ว TopBar ปรากฏว่าเป็นส่วนหนึ่งของเป็น"ผังแป้นพิมพ์"และคุณต้องการที่แตกต่างกั"ผังแป้นพิมพ์"เป็นพิเศษสำหรับ"/ล็อกอิ"จากนั้นฉันแนะนำให้ abstracting ตู้คอนเทนเนอส่วนประกอบเข้าไปในผังแป้นพิมพ์ส่วนประกอบ แต่ละการจัดวางตู้คอนเทนเนอร์ควรจะจัดการพาน Outlet สำหรับพวกเขา respective รอบการเส้นทาง.

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

ยังไงต้องไปเจาะจงเส้นทางโดยไม่มีการแสดงผลบางส่วนประกอบในตอบโต้?

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่