Question

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

我想要它，以便当您单击NavBar.jsx中的链接时，它会将组件加载到Body.jsx中。目前，它在整个屏幕上加载一个组件，取代了所有内容。

我相信使用React Router 3你应该对this.props.children做点什么，但是如果你们和gals能为我揭示这一点，我会非常感激。谢谢。

这是最重要的组件代码：

＆＃13;

ReactDOM.render(
  <Router>
    <div>
      <Route path="/" component={Index} />
    </div>
  </Router>

, document.getElementById('app'));

＆＃13;

我的组件来自Index＆gt;身体＆gt; TabArea 导航栏位于索引＆gt;横幅＆gt; HotelTop

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

Answer 1

我相信没有办法指定使用React Router 4渲染路径组件的位置。它总是就地渲染。因此，您的组件将始终是已呈现它的Route的子组件。

但您可以在应用中设置多个Router设置 - 例如Body.jsx中的一个和Sidebar.jsx中的另一个 - 因此您可以获得所需的结果。< / p>

Answer 2

我明白了。在您希望链接加载的位置，您必须放置一个开关然后在那里路由，但不要在那里放置新的路由器。

类似......

<div>
  <switch>
    <Route exact path = "/" component={containertoloadpaths}/>
      <Route path = "/Path1" component={component1}
      <Route path = "/Path2" component={component2}
    </Route>
  </switch>
</div>

//You can put code like this anywhere in your app where you'd like your links to load, and they'll load there.

如何判断路由器v4在哪里加载组件？

2 个答案: