在使用react-router的时候如何区分两种页面结构

Question

在开发页面的时候遇到如下场景：

登录注册页面，以及其余的页面（比如 首页，详情页）有不一样的结构，但是其余页面有相同的页面骨架，比如头部相同，侧边栏相同，请问在写路由的时候该怎么写才能区分开

目前index文件（未加入登录和注册页面）

<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>

那么该如何在页面中加入 login页面呢 ，login页面不包含Sider Header等等东西

Answer 1

把相同的放到Router外面，不同的放到Router里面就可以了。

Answer 2

可以把login当做一个组件，你的那个React.Fragment里面的内容当做一个组件就ok了