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

【问题标题】：How can you route to a different BrowserRouter component in React Router 4?如何在 React Router 4 中路由到不同的 BrowserRouter 组件？
【发布时间】：2019-01-07 08:35:37
【问题描述】：

我有一个带有“登陆页面”的单页应用程序，它有自己的 BrowserRouter。 “登陆页面”上的链接指向包含导航栏的实际应用程序。 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>，但我所有的尝试都遇到了其他问题，例如所需的链接仅在子 div 内呈现，而不是将整个页面重定向到它。

非常感谢任何帮助。

【问题讨论】：

标签： reactjs navigation react-router navbar react-router-dom

【解决方案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>

【讨论】：

哇，这是一个如此明显的解决方案......我是个白痴。非常感谢老兄！