React Router 组件渲染两次答案

【问题标题】：React Router component rendering twiceReact Router 组件渲染两次
【发布时间】：2017-12-29 09:53:29
【问题描述】：

我有一个导航栏组件，我正在尝试将其组合在一起，但我在调用所有组件的 App.js 中存在问题。我必须渲染导航栏两次才能使其工作，但它显示了两次，其中只有第二个导航栏起作用。在渲染中取出两行代码中的任何一行都会导致错误，其中仅显示导航栏的文本（但仅显示一次，而不是两次），并且不可点击。

这里是渲染（），导航栏被渲染了两次：

render() {
    return (
      <div>
        <Login />
        <Search />
        <BrowserRouter> 
            <div className='container'>
                <Navbar />
                <Route component={Navbar}/>
                <Route exact path="/" component={Home}/>
                <Route path="/bios" component={Bios}/>
                <Route path="/message" component={Message}/>
            </div>
        </BrowserRouter>
      </div>

    );
  }

【问题讨论】：

这就是为什么
正如 sergey 所说，我建议删除 <Route component={Navbar} />，因为它没有提供，而 <Route /> 是不必要的。

标签： reactjs react-router navbar render

【解决方案1】：

您可能希望 NavBar 在您的 <BrowserRouter> 之外，因为我猜它总是被渲染并且不依赖于匹配某些路线，即

render() {
    return (
      <div>
        <Login />
        <Search />
        <Navbar />
        <BrowserRouter> 
            <div className='container'>
                <Route exact path="/" component={Home}/>
                <Route path="/bios" component={Bios}/>
                <Route path="/message" component={Message}/>
            </div>
        </BrowserRouter>
      </div>
    );
  }

【讨论】：

我尝试将其更改为您提供的渲染代码，但出现“TypeError: Cannot read property 'route' of undefined”错误。查找此错误建议使用包装所有，这已经完成。知道这个错误是什么意思吗？

【解决方案2】：

我解决了这个问题。我之前遇到的错误是因为下面的 2 个语句：

<Navbar />
    <Route component={Navbar}/>

其中一个正在渲染另一个组件，显然如果两个组件重叠，甚至部分重叠，它的功能就会消失。我什至无法判断它是否重叠，因为组件周围有透明填充。我所做的只是删除第二条语句并在我的 CSS 中设置导航栏的样式，使其不再重叠。

【讨论】：