encountered the following scenario when developing the page:

Log in to the registration page, and the other pages (such as home page and details page) have different structures, but the other pages have the same page skeleton, such as the same head and the same sidebar. How to tell the difference when writing a route

current index file (login and registration page not added)

<BrowserRouter>
  <React.Fragment>
    <Header />
    <div className="container">
      <div className="left-side">
        <Sider />
      </div>
      <div className="content">
        <ContentHeader />
        <Switch>
          <Route path="/" exact component={ Home } pageName={""} />
          <Route path="/detail" exact component={ Detail} pageName={""} />
        </Switch>
      </div>
    </div>
  </React.Fragment>
</BrowserRouter>

so how do you add a login page to the page? the login page does not contain Sider Header and other things