javascript - 我如何告诉 React Router v4 在哪里加载组件？

Question

这是让我对 React Router 4 感到困惑的地方。我目前在主父组件 index.jsx 中设置了路由。导航栏位于其自己的组件 NavBar.jsx 中。

我希望当您单击 NavBar.jsx 中的链接时，它会将组件加载到 Body.jsx 中。目前它在整个屏幕上加载一个组件来替换所有内容。

我相信在 React Router 3 中你应该对 this.props.children 做一些事情，但是如果你们能为我阐明这一点，我将非常感激。谢谢。

这是最顶层的组件代码:

ReactDOM.render(
  <Router>
    <div>
      <Route path="/" component={Index} />
    </div>
  </Router>

, document.getElementById('app'));

我的组件来自 Index > Body > TabArea导航栏位于索引 > 横幅 > HotelTop

选项卡区域是我想要渲染 HotelTop 导航栏选择的组件的位置。

Answer 1

我相信 React Router 4 无法指定在哪里渲染路由组件。它总是就地渲染。因此，您的组件将始终是渲染它的 Route 的子组件。

但是您可以在应用中进行许多 Router 设置 - 例如 Body.jsx 中的一个设置，以及某个 Sidebar.jsx 中的另一个设置code> — 这样您就可以获得所需的结果。