javascript - 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>
);

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

Answer 1

Route 的每个子项都将作为 props.children 提供。

当您位于 / 时，Index 将在 props.children 为空的情况下呈现。

当您位于 /nextpage 时，Index 也会被渲染，但这次 props.children 包含 索引2。

因此，在 Index 中，您必须考虑要在何处渲染 props.children。