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