由于侧边栏和导航栏，React 中的未找到页面无法正常工作

Posted 2023-02-19

【中文标题】由于侧边栏和导航栏，React 中的未找到页面无法正常工作

【英文标题】：Not Found Page in React is not working properly because of Sidebar and Navbar

【发布时间】：2021-10-02 05:52:54

【问题描述】：

大家好，我有一个问题，我正在实现一个登录页面、登录页面和一个仪表板，它们在顶部有一个导航栏，在左侧有一个侧边栏。所以在我的 App.js 中，我导入了我的组件，但因为侧边栏和导航栏只需要在仪表板上可见，所以我以这种方式实现。

  return (
    <>
        <div className="App">
          <Switch>
              <Route exact path="/" component=HomePage/>
              <Route exact path="/login" component=Login/>
              <Route exact path="/register/confirm/:id" component=ConfirmPassword/>
              <Route exact path="/password/reset" component=ResetPassword/>
              <Route>
                  <div className="dashBoard-container">
                      <NavBar isLogged=loggedIn/>
                      <div className="main-container">
                          <Switch>
                              <PrivateRoute path="/admin" authed=loggedIn component=Dashboard/>
                              <PrivateRoute path="/departments" authed=loggedIn component=Department/>
                              <PrivateRoute exact path="/tickets/assigned" authed=loggedIn component=Assigned/>
                              <PrivateRoute exact path="/tickets/active" authed=loggedIn component=Active/>
                              <PrivateRoute exact path="/tickets/unassigned" authed=loggedIn component=Unassigned/>
                              <PrivateRoute exact path="/tickets/new" authed=loggedIn component=New/>
                              <PrivateRoute exact path="/tickets/pending" authed=loggedIn component=Pending/>
                              <PrivateRoute exact path="/tickets/open" authed=loggedIn component=Open/>
                              <PrivateRoute exact path="/tickets/closed" authed=loggedIn component=Closed/>
                              <PrivateRoute exact path="/tickets" authed=loggedIn component=AllTickets/>
                              <PrivateRoute path="/settings/general" authed=loggedIn component=General/>
                              <PrivateRoute path="/settings/type" authed=loggedIn component=Types/>
                              <PrivateRoute path="/settings/priority" authed=loggedIn component=Priority/>
                              <PrivateRoute path="/settings/tags" authed=loggedIn component=Tags/>
                              <PrivateRoute path="/settings/mailer" authed=loggedIn component=Mailer/>
                              <PrivateRoute path="/users" authed=loggedIn component=User/>
                              <PrivateRoute path="/profile" authed=loggedIn component=Profile/>
                              <PrivateRoute path="/tickets/unassigned/:id" authed=loggedIn component=TicketDetail/>
                              <PrivateRoute path="/tickets/assigned/:id" authed=loggedIn component=TicketDetail/>
                              <PrivateRoute path="/tickets/active/:id" authed=loggedIn component=TicketDetail/>
                              <PrivateRoute path="/tickets/new/:id" authed=loggedIn component=TicketDetail/>
                              <PrivateRoute path="/tickets/pending/:id"authed=loggedIn component=TicketDetail/>
                              <PrivateRoute path="/tickets/closed/:id" authed=loggedIn component=TicketDetail/>
                              <PrivateRoute path="/tickets/open/:id" authed=loggedIn component=TicketDetail/>
                              <PrivateRoute path="/tickets/:id(\d+)" authed=loggedIn component=TicketDetail/>
                              <Route component=NotFound/>
                          </Switch>
                      </div>
                      <Sidebar isLogged=loggedIn/>
                  </div>
              </Route>
          </Switch>
        </div>
    </>
);

所以我的“未找到页面”仅显示在仪表板内部，导航栏和侧边栏可见，但我不希望我的导航栏和侧边栏可见，在主开关中添加外部路由，即使路由也始终显示存在。我知道在 Switch 内部最好只有路由而不是其他组件，但是您对如何解决这个问题有什么建议吗？谢谢

【问题讨论】：

请将您的代码作为文本而不是图像包含（适用于搜索引擎、有屏幕阅读器的人、每个人都易于阅读、易于复制粘贴等）

【参考方案1】：

看来你已经有了答案：

我知道 Switch 内部最好只有路由而不是其他组件

您可以应用的最简单的解决方案：

通过提取仪表板容器、导航栏、主容器和侧边栏来创建<DashboardPage /> 组件。主容器应该呈现children 在第二个开关（仪表板、部门、已分配、活动等）的每个组件文件中，用<DashboardPage /> 包装其内容 将所有路由从第二个交换机移动到第一个交换机 移除第二个开关 在第一个开关中添加 404 组件