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

Posted 2023-02-21

【中文标题】React 导航栏在屏幕上，即使它不在路由器上

【英文标题】：React navigation bar is in the screen even though it is not on the router

【发布时间】：2022-01-24 02:03:54

【问题描述】：

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

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

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

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 中写的导航栏。

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

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

【问题讨论】：

我认为您应该在单个路由器中包含所有<Route> 标签。您可以更改每个元素/组件的导航栏。也许these docs 可以帮助你。

【参考方案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>
    </>
  );

【讨论】：

这有效，但前提是你有 1 个导航栏，如果我有多个导航栏组件我该怎么办 - 每个子系统都有不同的导航栏

@sarpoc 哦，我认为您的另一个 question 中的代码看起来很熟悉。我在那里回答了如何处理不同部分/区域中的多个导航栏。