加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React Router DOM – 如何在每个页面上包含导航栏?

发布时间:2020-12-15 20:15:22 所属栏目:百科 来源:网络整理
导读:我的App.js组件中有这个代码: render() { return ( div Navbar/ BrowserRouter Switch Route exact path="/" component={Home}/ Route path="/about" component={About} / Route path="*" render={() = Redirect to="/" /} / /Switch /BrowserRouter /div )
我的App.js组件中有这个代码:

render() {
        return (
            <div>
                <Navbar/>
                <BrowserRouter>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route path="/about" component={About} />                         
                        <Route path="*" render={() => <Redirect to="/" />} />
                    </Switch>
                </BrowserRouter>
            </div>
        );
    }

现在我尝试在我的一个其他组件中包含一个Link组件,但我发现BrowserRouter必须是App.js组件的根元素,以便它可以工作.现在我想知道如果我还想在每个页面上都包含导航栏,我将如何将其作为路由元素.

解决方法

您应该可以将它放在< Switch>之外.零件.

<BrowserRouter>
    <div>
        <Navbar/>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About} />                         
            <Route path="*" render={() => <Redirect to="/" />} />
        </Switch>
    </div>
</BrowserRouter>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读