Question

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

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

Answer 1

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

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

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

1 个答案: