React Router DOM — 如何在每个页面上包含导航栏？

【问题标题】：React Router DOM — How to include a navigation bar on every page?React Router DOM — 如何在每个页面上包含导航栏？
【发布时间】：2018-01-28 13:56:33
【问题描述】：

我的 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 组件的根元素，才能使其工作。现在我想知道如果我仍然想在每个页面上都包含导航栏，我将如何将它作为路由元素。

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

您应该可以将它放在<Switch> 组件之外。

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

【讨论】：

查看我自己的带有反应路由器的项目，您似乎需要在 Navbar 和 Switch 周围包裹 div，因为 BrowserRouter 需要一个孩子。编辑答案。