App.js 中某些頁面的渲染側邊欄 ReactJs

Question

我想為除登錄和注冊之外的所有頁面呈現側邊欄。 只是想確認是否有其他最佳方法可以做到這一點，並在這種情況下管理 404 頁面。

return loading ? (
    <p>loading</p>
  ) : (
    <>
      <Router>
        <div className="app">
          <NavBar />
          <ToastContainer />
          <Switch>
            <Route path={LOGIN_ROUTE} component={LoginPage} exact />
            <Route path={SIGNUP_ROUTE} component={SignupPage} exact />
            <div className="app-container">
              {showSidebar && <Sidebar />}
              <div className="app-main">
                <Switch>
                  <Route path={HOME_ROUTE} component={HomePage} exact />
                  <Route
                    path="*"
                    component={() => (
                      <NotFound setShowSidebar={setShowSidebar} />
                    )}
                  />
                </Switch>
              </div>
            </div>
          </Switch>
        </div>
      </Router>
    </>
  );

Answer 1

您可以將路由器配置代碼拆分為兩個組件，一個具有身份驗證路由，另一個具有歸屬路由。 因此，您可以將導航欄包含在 home 組件中。 例如，

 // In router.js <Router> <Route path="/auth" component={AuthComponent} exact /> <Route path="/home" component={HomeComponent} exact /> <Route path="*" component={() => (<NotFound setShowSidebar= {setShowSidebar} />)}/> </Router> // In AuthComponent <Router> <Route path="/signin" component={SigninComponent} exact /> <Route path="/signup" component={SignupComponent} exact /> <Route path="*" component={() => (<NotFound setShowSidebar= {setShowSidebar} />)}/> </Router> // In HomeComponent <div> <Navbar /> <Router> <Route path="/signin" component={SigninComponent} exact /> <Route path="/signup" component={SignupComponent} exact /> <Route path="*" component={() => (<NotFound setShowSidebar= {setShowSidebar} />)}/> </Router> </div>