React Router组件渲染两次

问题描述

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

I have a navigation bar component that I am trying to put together, and I have a problem in my App.js, where I call all the components. I have to render the navbar twice in order for it to work, but it shows up twice, where only the second navbar is functional. Taking out either of the 2 lines of code in the render results in an error, where only the text of the navbar shows up (but only shows up once, not twice), and is not clickable.

这里是render()，其中导航栏被渲染了两次:

Here is render() with navbar rendered twice:

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>

    );
  }

推荐答案

我已解决此问题.我之前遇到的错误是因为下面的2条语句:

I fixed the problem. The error I was getting earlier was because the 2 statements below:

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

其中一个正在渲染另一个组件，并且显然，如果两个组件重叠(甚至部分重叠)，则其功能将消失.我什至不能说它重叠了，因为组件周围有透明的填充物.我要做的所有工作就是删除第二条语句，并在CSS中设置导航栏样式，以使其不再重叠.

One of them was rendering over another component, and apparently if two components overlap, even partially, the functionality of it disappears. I couldn't even tell that it overlapped because there was transparent padding around the components. All I did to fix it was delete the 2nd statement and style the navbar in my CSS so that it didn't overlap anymore.

这篇关于React Router组件渲染两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！