在不同的页面上做出不同的反应 Headers

Question

我想在仪表板内制作一个不同的 header & footer 但它仍然无法正常工作，如何让它工作它只能在路由器内部工作

这是我的代码：

 <Router>
    <Routes>
      <Route path="/" >
        <Header /> 
        <Route index element={<><Hero /><HomeAbout /> <Slider /> </>} />
        <Route exact path="about" element={<About />} />
        <Route exact path="contact" element={<Contact />} />
      </Route>

      <Route path="/dashboard">
        <HeaderDashBoard/>
        <Route index  />
      </Route>


    </Routes>
      <Footer /> 
 </Router>

这也是制作仪表板的正确格式吗？

Answer 1

你想在这种情况下使用嵌套路由

制作另一个组件作为模板

import { Outlet } from "react-router-dom";

const HomeTemplate = () => {
  return (
    <div>
      <Header /> 
      <Outlet />
      <Footer />
    </div>
  );

然后像这样嵌套你的路线

<Routes>
      <Route path="" element={<HomeTemplate />}>
        <Route index element={<><Hero /><HomeAbout /> <Slider /> </>} </Route>
        <Route exact path="about" element={<About />} />
        <Route exact path="contact" element={<Contact />} />
      </Route>
 </Routes>

现在所有的路线都将被主页模板包裹，所有的元素都将在主页模板中的 Outlet 所在的位置呈现

在不同的页面上做出不同的反应 Headers

React Different Headers On Different Pages

reactjs

react-router

react-router-dom