我有两个组件,一个带菜单,另一个带链接 . 两者都指向同一条路线 .

这在第一个组件中运行良好,但在第二个组件中它工作正常 . 因为它指向路由而没有任何问题'/' - > localhost:3000(th索引页)但它不会在此代码行中呈现组件

<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),但它不呈现'Home'组件 . 它将继续显示最后点击的组件 .

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
</Link> </h1> <Route exact path='/' render={() => <Home />} /> </div> </Router> </div> </div>

有谁知道如何解决它?谢谢