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>