Reactjs 如何使用嵌套路由和专用路由组件在react.js中正确构造路由？

我使用的是react路由器dom。目前我有一个app.js文件，其中包含如下路由：

<BrowserRouter>
    <div className="App container">

        <Header/>

        <Switch>
            <Route exact path='/' component={Dashboard}/>
            <Route path='/profile' component={Profile}/>
        </Switch>

    </div>
 </BrowserRouter>

<BrowserRouter>
    <div className="App container">

        <Switch>
            <Route path='/login' component={Login}/>

            <Route path='/'>

                <Header/>

                 <Switch>
                     <Route exact path='/' component={Dashboard}/>
                     <Route path='/profile' component={Profile}/>
                 </Switch>

            </Route>
        </Switch>
    </div>
 </BrowserRouter>

所以，我有标题组件，它总是在页面上，和两个组件的路由，仪表板和配置文件。现在，我想添加一个新的页面“Login”，该页面将只有一个登录组件（没有标题组件）。大概是这样的：

<BrowserRouter>
    <div className="App container">

        <Header/>

        <Switch>
            <Route exact path='/' component={Dashboard}/>
            <Route path='/profile' component={Profile}/>
        </Switch>

    </div>
 </BrowserRouter>

<BrowserRouter>
    <div className="App container">

        <Switch>
            <Route path='/login' component={Login}/>

            <Route path='/'>

                <Header/>

                 <Switch>
                     <Route exact path='/' component={Dashboard}/>
                     <Route path='/profile' component={Profile}/>
                 </Switch>

            </Route>
        </Switch>
    </div>
 </BrowserRouter>

---

最后一步是用专用路由组件替换路由组件。

您所说的专用路由是什么意思？ 对于没有标题的登录页面，请使用React片段

<Switch>
    <Route path='/login' component={LoginComponent} /> {/* <--- No header */}
    <Fragment>
        <Header/>
        <Route exact path='/' component={Dashboard}/>
        <Route path='/profile' component={Profile}/>
    </Fragment>
</Switch>

{/*谢谢，但我需要将片段中的两条路由封装到一个交换机中，以使其按预期工作。有更平滑的方法吗？