React Router组件呈现两次

Question

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

这是render（），导航栏呈现两次：

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>

    );
  }

Answer 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>
    );
  }

Answer 2

我解决了这个问题。我之前得到的错误是因为下面的两个陈述：

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

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