ReactJS 中的嵌套路由

Question

我不确定如何获得同时显示两个组件的嵌套路由或什至是同时显示两个组件的两个非嵌套路由。

我的路线如下：

export default (    
    <Route path="/" component={Index}>
        <Route path="/nextpage" component={Index2} />
    </Route>
);

在我的提供商中得到利用

export default (
  <Provider store={store}>
    <Router history={browserHistory}>{routes}</Router>
  </Provider>
);

我是新手，但我的理解是，当我访问端点 nextpage 时，应该同时呈现 Index 和 Index2。但是，只有第一个组件被渲染。我还需要做些什么才能让这两个组件都出现吗？

Answer 1

Route 中的每个 child 都将作为 props.children 使用。

当您在 / 时，Index 将呈现为 props.children 为空。

当你在/nextpage时，Index也会被渲染，但这次props.children包含Index2。

因此，在 Index 中，您必须考虑要渲染的位置 props.children。

Nested Routes in ReactJS