React JS - две ссылки указывают на один и тот же маршрут

Question

У меня есть два компонента, один с меню, а другой со ссылкой. Оба указали на один и тот же маршрут.

Это работает хорошо в первом компоненте, но во втором компоненте работает плохо. Потому что он без проблем направляется на маршрут '/' -> localhost: 3000 (th index page), но НЕ выполняет рендеринг компонента в этой строке кода

<Route exact path='/' render={() => <Home />} />

Вот первый компонент. Работает отлично. Здесь нет проблем

const MainMenu = (props) => {

  return (
    <div>
    <Router>
      <div className="wrapper2">
        <nav className="main-menu">
          <ul>             
            <li><NavLink className="home-link" 
                activeClassName="active" exact to="/">home</NavLink>
          </li>
          // Another links ommited because they're not part of the problem             
        </nav>
        <div className="page-content">
         <Route exact path='/' render={() => <Home />} />
        </div>
      </div>
    </Router>
  </div>
  )
}

Вот второй компонент. Это плохо работает. Маршрут показывает правильный URL-адрес, индекс (http://localhost:3000), но он НЕ рендерит компонент «Домой». Он продолжает показывать последний нажатый компонент.

const Header = (props) => {
  return (
  <div className="header">
    <div>
      <Router>
      <div>
        <h1>
          //here I have only one link
          <Link className="home-link" exact 
         to='/'>Logo Image<br />             
          </Link>
        </h1>
        <Route exact path='/' render={() => <Home />} />
      </div>
    </Router>
  </div>
</div>

Кто-нибудь знает, как это решить? Спасибо