React路由器组件渲染两次

Question

我有一个导航栏组件，我试图放在一起，并且我的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> 

    ); 
    } 

Answer 1

我修复了这个问题。早些时候，我得到的错误是因为下面的语句2：

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

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

Answer 2

您可以外接希望你<BrowserRouter>的作为的NavBar我猜它总是呈现，而不是依赖于一些匹配路线，即

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