如何在反应中将主页的页眉和页脚与管理页面中的显示分开

Question

function App() {
  return (
    <Router >
      <NavBar/>
        <Routes>
          <Route path="/" element={<HomePage />}/>
          <Route exact path="/about-us" element={<About />} />
          <Route exact path="/admin" element = {<Admin/>}/>
        </Routes>
      <Footer/>
    </Router>
  );
}

export default App;

如何在反应中将主页的页眉和页脚与管理页面中的显示分开？

Answer 1

以下react-router-dom v6文档入门

创建不同的布局并使用Outlet组件将视图插入布局中

import { Outlet } from 'react-router-dom'

function BasicLayout() {
  return (
    <>
      <NavBar />
      <Outlet />
      <Footer />
    </>
  )
}

function AdminLayout() {
  return <Outlet />
}

function App() {
  return (
    <Router >
      <Routes>
        <Route path="/" element={<BasicLayout />}>
          <Route index element={<HomePage />}/>
          <Route path="about-us" element={<About />} />
        </Route>
        <Route path="/admin" element={<AdminLayout />}>
          <Route index element={<Admin/>}/>
        </Route>
      </Routes>
    </Router>
  );
}

export default App;