如何使用嵌套路由和私有路由组件在 react.js 中正确构建路由？

Posted 2023-02-22

【中文标题】如何使用嵌套路由和私有路由组件在 react.js 中正确构建路由？

【英文标题】：How to properly structure routes in react.js using nested routes along with private route component?

【发布时间】：2019-05-30 06:17:44

【问题描述】：

我正在使用 react-router-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>

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

【参考方案1】：

私人路线是什么意思？ 对于没有标题的登录页面，请使用 React 片段

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

【讨论】：

谢谢，但我需要将 Fragment 中的两条路线包装成另一个开关，以使其按预期工作。有没有更流畅的方法？