Question

我有一个带有“登录页面”的单页面应用程序，该应用程序具有自己的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内呈现而不是将整个页面重定向到它。

非常感谢您的帮助。

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组件？

1 个答案: