如何将主页的页眉和页脚从react中的管理页面中分离出来

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;

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

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;

Answer 2

您必须在app.js 中定义路由

const App = () => {
return (
<React.Fragment>
<BrowserRouter>
<Switch>
<Route exact path="/">
<Redirect push to="/login" />
</Route>
<Route exact path="/login" component={Login} />
<Route exact path="/forgotPassword" component={ForgotPassword} />
<AdminRoute exact path="/dashboard" component={Dashboard} />
<AdminRoute exact path="/logout" component={Logout} />
</Switch>
<ToastContainer position="top-right" theme="colored" />
</BrowserRouter>
</React.Fragment>
);
};

仪表板组件将是这样的。。。

const Dashboard = () => {
return (
<React.Fragment>
<LayoutContainer>
<AdminHeader title="Dashboard" />
<div className="page-content-wrapper scrollable">
<div>
<h3 style={{ color: 'red' }}>Dashboard</h3>
</div>
</div>
<AdminFooter title="Dashboard" />
</LayoutContainer>
</React.Fragment>
);
};