如何在不同页面上使用不同种类的导航栏组件

Question

我为我们项目的两个不同子系统创建了两个不同的导航栏组件。

App.js

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<CirclePage />} />
          <Route
            path = "*"
            element={
              <>
                <Navbar/>
                <Routes>
                  <Route path="/homepage" element={<Homepage />} />
                  <Route path="/events" element={<Events />} />
                  <Route path="/clubs" element={<Clubs />} />
                  <Route path="/notifications" element={<Notifications />} />
                  <Route path="/profile" element={<Profile />} />
                  <Route path="/contact" element={<Contact/>}/>
                </Routes>
              </>
            }
          />

          <Route 
            path = "*"
            element={
              <>
                <NavbarClub/>
                <Routes>
                  <Route path="/homepage-club" element={<HomepageClubs />} />
                  <Route path="/events-club" element={<EventManagement />} />
                  <Route path="/contact-clubs" element={<ContactClubs />} />
                  <Route path="/notifications-club" element={<NotificationsClub />} />
                  <Route path="/profile-club" element={<ClubProfile />} />
              </Routes>
              </>
            } 
            />

        </Routes>
      </Router>
    </>
  );
}

export default App;

导航栏在除主屏幕 CirclePage 之外的每个屏幕上都可见。我希望 Navbar 在主页、活动、俱乐部、通知、个人资料和联系人中可见，而 NavbarClub 在 -club 页面中可见。我该如何实现？

Answer 1

为每个呈现特定导航栏的布局包装器组件创建一个 Outlet 用于嵌套的 Route 组件。

例子：

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

const NavbarLayout = () => (
  <>
    <Navbar />
    <Outlet />
  </>
);

const NavbarClubLayout = () => (
  <>
    <NavbarClub />
    <Outlet />
  </>
);

应用程序

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<CirclePage />} />
        <Route path="*" element={<NavbarLayout />}>
          <Route path="homepage" element={<Homepage />} />
          <Route path="events" element={<Events />} />
          <Route path="clubs" element={<Clubs />} />
          <Route path="notifications" element={<Notifications />} />
          <Route path="profile" element={<Profile />} />
          <Route path="contact" element={<Contact />} />
        </Route>

        <Route path="*" element={<NavbarClubLayout />}>
          <Route path="homepage-club" element={<HomepageClubs />} />
          <Route path="events-club" element={<EventManagement />} />
          <Route path="contact-clubs" element={<ContactClubs />} />
          <Route path="notifications-club" element={<NotificationsClub />} />
          <Route path="profile-club" element={<ClubProfile />} />
        </Route>
      </Routes>
    </Router>
  );
}