如何在 React Router 4 中路由到不同的 BrowserRouter 组件？

Question

我有一个带有 'landing page' 的单页应用程序，它有自己的 BrowserRouter。 'landing page' 路径上的 links 指向包含导航栏的实际应用程序。 NavBar 包含在单独的 BrowserRouter 中，并在同一页面上呈现为 div。我希望能够按下导航栏内的图像以完全重新路由到着陆页。我知道在 React 的早期版本中，这可以通过重定向或将路径推送到堆栈来完成。但是，这似乎在 React v4 中不起作用。当运行以下代码时：

<BrowserRouter>
  <div>
    <ul className="NavBar">
      <li> 
        <Route render={({ history }) => (
            <img
                src= {logo} height = "20"
                onClick={() => { this.props.history.push('/') }}
            />
        )} />
      </li>
      <li><NavLink exact to="/page1">Page 1</NavLink></li>
      <li><NavLink to="/page2">Page 2</NavLink></li>
      <li><NavLink to="/page3">Page 3</NavLink></li>
    </ul>

    <div className="Content">
      <Route exact path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
      <Route path="/page3" component={Page3} />
    </div>
  </div>
</BrowserRouter>

我正在 TypeError: Cannot read property 'history' of undefined。我从 NavBar 内部尝试了其他方法，例如 <Link to="/"><img/></Link>，但我的所有尝试都遇到了其他问题，例如所需的 link 仅在子 div 内部呈现，而不是重定向整个翻页。

非常感谢任何帮助。

Answer 1

您不必将整个组件包装在 BrowserRouter 中，只需将路由包装起来即可。那么使用Link标签就可以解决问题了。

   <div>
    <ul className="NavBar">
     <li><Link to="/"><img src= {logo} height = "20" /></Link></li>
     <li><Link to="/page1">Page 1</Link></li>
     <li><Link to="/page2">Page 2</Link></li>
     <li><Link to="/page3">Page 3</Link></li>
    </ul>
   </div>
   <BrowserRouter>
     <div>
      <Route exact path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
      <Route path="/page3" component={Page3} />
    </div>
 </BrowserRouter>

如何在 React Router 4 中路由到不同的 BrowserRouter 组件？

How can you route to a different BrowserRouter component in React Router 4?

navigation

navbar

reactjs

react-router

react-router-dom