Question

我有两个组件，一个是菜单，另一个是链接。两者都指向同一条路线。

这在第一个组件中运行良好，但在第二个组件中它运行正常。因为它指向路线没有任何问题'/' - ＆gt; localhost：3000（索引页面），但它不在此代码行中呈现组件

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

这是第二个组成部分。这工作很糟糕。路线显示正确的网址，即索引（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>

有人知道如何解决它吗？感谢

React JS - 指向同一Route

0 个答案: