App.js ReactJs 中某些页面的渲染侧边栏答案

【问题标题】：Render sidebar for some pages in App.js ReactJsApp.js ReactJs 中某些页面的渲染侧边栏
【发布时间】：2021-05-21 15:56:18
【问题描述】：

我想为除登录和注册之外的所有页面呈现侧边栏。只是想确认是否有任何其他最佳方法可以做到这一点，并在这种情况下管理 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>
    </>
  );

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案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>

【讨论】：