时间戳

首页 > 解决方案 > 使用导航栏切换路由器

reactjs - 使用导航栏切换路由器

问题描述

我想在除“介绍”页面之外的每个页面顶部都有一个导航栏。这是正确的方法吗？有更清洁的方法吗？

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

标签： reactjsreact-router

解决方案

您可以通过执行以下操作来完成此操作：

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 的组件。不需要导航栏的其他所有内容都可以在其自己的路线中定义，如简介

推荐阅读