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;

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

最佳答案

遵循 react-router-dom v6 文档 getting-started

创建不同的布局并使用Outlet组件将您的 View 放入布局中

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;

https://stackoverflow.com/questions/71420106/