Блог

Я хочу отобразить боковую панель для всех страниц, кроме входа и регистрации. Просто хотел подтвердить, есть ли какой-либо другой оптимальный способ сделать это и управлять страницей 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 amp;amp; <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>
    </>
  );
 

Вы можете разделить код конфигурации маршрутизатора на два компонента, один из которых содержит маршруты аутентификации, а другой-домашние маршруты. Таким образом, вы можете включить свою навигационную панель в компонент 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>