Показать только один компонент в маршруте и скрыть все остальные

Question

Я делаю приложение с боковой панелью, которую я показываю на всех маршрутах. Я хочу спрятать все на маршрутах входа и регистрации и показывать только формы входа и регистрации. Как мне этого добиться?

Вот как я это структурировал

<BrowserRouter>
      <BodyContainer>
        <SideBar />
        <div>
         <Header/>
          <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/create" component={NewInvoice} />
            <Route exact path="/invoices" component={Invoices} />
            <Route exact path="/settings" component={Settings} />
            <Route exact path="/invoice/:id" component={InvoiceDetails} />
          </Switch>
        </div>
      </BodyContainer>
    </BrowserRouter>

Я хочу спрятать все внутри BodyContainer и показать новую страницу входа.

Answer 1

Вы можете проверить путь к файлу, чтобы решить, следует ли отображать:

<BrowserRouter>
      <BodyContainer>
        {
          ['/login', '/register'].indexOf(window.location.pathname) == -1 && <SideBar />
        }
        <div>
         <Header/>
          <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/create" component={NewInvoice} />
            <Route exact path="/invoices" component={Invoices} />
            <Route exact path="/settings" component={Settings} />
            <Route exact path="/invoice/:id" component={InvoiceDetails} />
          </Switch>
        </div>
      </BodyContainer>
    </BrowserRouter>

Другое решение состоит в том, чтобы реструктурировать ваши компоненты так, чтобы SideBar был включен в каждый компонент, что даст вам гибкость выбора какие компоненты должны показать это.

Answer 2

Вы можете просто обработать это перед отображением главной страницы, как этот код

render(){
    const isUserLoggedIn = false;
    const privateRoutes = 
    (   <>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/create" component={NewInvoice} />
            <Route exact path="/invoices" component={Invoices} />
            <Route exact path="/settings" component={Settings} />
            <Route exact path="/invoice/:id" component={InvoiceDetails} />
        </>
    );
    const publicRoutes = (
        <>
            <Route exact path="/" component={Login} />
            <Route exact path="/register" component={Register} />
            <Redirect to="/"/>
            <
        </>
    );

    const content = isUserLoggedIn ? privateRoutes : publicRoutes;

    return(
        <BrowserRouter>
            <BodyContainer>
                <SideBar />
                <div>
                <Header/>
                    {content}
                </div>
            </BodyContainer>
        </BrowserRouter>

    )
}