javascript - React 导航栏在屏幕中，即使它不在路由器上

Question

我们正在尝试实现一个 React 元素，该元素具有 3 种不同类型的同一应用程序，用于 3 种不同的目的。可以把它想象成用户将选择在主屏幕上使用哪个。所有 3 种类型具有相似但不同的页面结构、不同的导航栏等。

我在主页上使用了一个路由器，他们可以在其中选择他们想要使用的应用程序类型，路径为“/”，并为不同类型的应用程序使用不同的路由器，因为它们的导航栏等是不同的。但是导航栏出现在主屏幕中，即使它不存在于路由器中也是如此。

我知道这听起来很复杂，但我会用代码片段和屏幕截图来展示它。

App.js

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path = "/" exact element={<CirclePage />}/>
        </Routes>
      </Router>

      <Router>
        <Routes>
          <Route path = "/homepage-clubs" exact element={<HomepageClubs />}/>
        </Routes>
      </Router>

      <Router>
        <Navbar/>
        <Routes> 
          <Route path='/homepage' exact element={<Homepage />}/> 
          <Route path='/events' exact element={<Events/>}/>
          <Route path='/clubs' exact element={<Clubs/>}/>
          <Route path='/contact' exact element={<Contact/>}/>
          <Route path='/notifications' exact element={<Notifications/>}/>
          <Route path='/profile' exact element={<Profile/>}/>
        </Routes>
      </Router>
    </>
  );
}
export default App;

Navbar是我在react中写的navbar。

主屏幕是这样的atm:application screen at first initialization

我不知道为什么屏幕下方有一个导航栏。我可能不了解路由器的工作原理，我不确定。我需要那个导航栏消失，因为每种类型的应用程序都会有不同类型的导航栏(我会为它们创建不同的导航栏)并且导航栏不应该在主屏幕上可见。可能是什么问题？

Answer 1

您同时渲染所有三个路由器，第三个包含 Navbar 组件，它也始终被渲染。您应该使用单个路由器来呈现所有路由。如果你想为特定路线使用不同的布局，那么你可以使用包装器组件来呈现 Navbar。将最后一组路由呈现为通用路由，该路由与 Navbar 一起匹配任何未更具体匹配的内容。

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<CirclePage />} />
          <Route path="/homepage-clubs" element={<HomepageClubs />} />
          <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 />} />
                </Routes>
              </>
            }
          />
        </Routes>
      </Router>
    </>
  );
}