Question

除“简介”页面外，我希望在每个页面顶部都显示一个导航栏。这是正确的方法吗？有更清洁的方法吗？

<BrowserRouter>
    <div>
        <Switch>
            <Route exact path = "/" component = {Introduction} />
            <div>
                <Navbar/>
                <PrivateRoute path = "/main" component = {main} />)
                <PrivateRoute path = "/other" component = {other} />)
            </div>
        </Switch>
    </div>
</BrowserRouter>

Answer 1

您可以通过执行以下操作来做到这一点：

class App extends React.Component{
    render(){
        const DefaultRoutes = () => {
            return(
                <div>
                    <Navbar/>
                    <Switch>
                        <PrivateRoute path = "/main" component = {main} />)
                        <PrivateRoute path = "/other" component = {other} />)
                    </Switch>                                                                                                           
                </div>
            )
        }

        return(
            <BrowserRouter>
                <div>
                    <Switch>
                        <Route exact path = "/" component = {Introduction} />
                        <Route component={DefaultRoutes}/>
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

export default App

定义一个DefaultRoutes函数，该函数包括所有具有导航栏的路由。然后将该功能用作BrowserRouter中路由的组件。不需要导航栏的所有其他内容都可以在其自己的Route中定义，例如Introduction

带有Navbar的切换路由器

1 个答案: