Почему не работают перход по линкам хедера если руты находятся в App.js а сами Link в файле Header.js?

App.js:

const history = createBrowserHistory();

class App extends React.Component {
  render(){ 
    return (
      <BrowserRouter history={history}> 
         <div className="wrapper">
        
        <Header/>
        
            <Switch>
            <Route exact path="/" component={Main} /> 
            <Route path="/about" component={About} />
            <Route path="/contacts" component={Contacts} />
            </Switch>
    
        <Footer/>          
        
       </div>
    </BrowserRouter>
   )
  }
}

Header.js:

const history = createBrowserHistory();

class Header extends React.Component {
  render(){ 
    return (
      <BrowserRouter history={history}> 
            <div className="header">
                     <div className="logo">LOGO</div>
                     <div className="links-header">
                        <Link to="/">Home</Link>
                        <Link to="/about">About</Link>
                        <Link to="/contacts">Contacts</Link>
                      </div>
          
                   <div className="search">
                     <input type="search" className="search-input"></input>
                     <input type="submit" className="search-button-input" value=""></input>
                   </div>

                   <div className="signin">
                     <button className="sign-button"></button>
                       <div className="signin-modal">
                         <div className="signin-modal-inner">
                           <p>Have an account?</p>
                           <input className="username-sign" placeholder="username"></input>
                           <input className="username-sign" placeholder="password"></input>
                           <button className="log-in"></button>
                           <p>New to blog?</p>
                           <button className="sign-in"></button>
                         </div>
                       </div>
                    </div>
              </div>
    </BrowserRouter>
   )
  }
}

Если руты :

<Switch>
                 <Route exact path="/" component={Main} /> 
                <Route path="/about" component={About} />
                 <Route path="/contacts" component={Contacts} />
            </Switch>

убрать из App.js и поместить в Header.js тогда при нажатии на Home,About, Contacts отображается контент из компонента( переход по линкам хедера).
Как сделать перход по линкам хедера чтобы руты находились в App.js а сами Link в файле Header.js?
Или все же лучше пусть руты будут в Header.js?