Reactjs 反应路由器：嵌套路由如何工作？

我有一个带有react路由器的react应用程序。我正在尝试设置嵌套路由：

"/" --> home page
"/products" --> products list (child component of home page)
"/products/new" --> new product: child component of products list

到目前为止，我试图做的是：

<Route path="/" component="home" >

     <Route path="products" component="products" >

           <Route path="new" component="products_new" />
     </Route>

</Route>

我的主页组件：

     <div className="col-lg-12">
        <h1>Home page</h1>
        <hr />
        {this.props.children}
    </div>

<Header />
<div>{this.props.children}</div>
</Footer />

主页

{this.props.children}

我的产品组件：

    <div>
        <div className="col-lg-12">
            <h1>Products</h1>
        </div>
        <hr />
        {this.props.children}
    </div>

产品

{this.props.children}

我的产品新组件：

---

你看过IndexRoutes吗？如果没有，请在网页上阅读。这里的问题是，当您访问

/products/new

时，react router会尝试渲染您的

products\u new

路由上方的所有组件

如果要在父组件内部渲染子组件，则需要使用此行为。请允许我举几个例子来说明：

例1 考虑下面的

home

组件，它有一个页眉和一个页脚，包含在所有页面上

<Header />
<div>{this.props.children}</div>
</Footer />

但通过这种路由：

<Route path="/">
  <IndexRoute component={home}
  <Route path="products" component={products} />
</Route>

---

谢谢你的回答。我照你说的做了，但不幸的是它仍然不起作用。我忘了说这是一个SPA（单页应用程序），所以我将browserHistory更改为hashHistory，现在它可以工作了（只有我的url中有一个#…对，你需要使用

历史记录

。不过我强烈建议使用

浏览器历史记录

。我更新了上面的代码，试试看。我理解你的答案。我的目的是让每个视图都在其父视图中呈现。我的问题是：为什么这个url有效：/products（我所说的works是指产品组件在home组件中正确呈现）但是这个url不起作用/products/new（虽然有占位符（{this.props.children}），但我得到一个空白页面内部产品组件。我希望在产品组件内部呈现产品新组件，然后在主组件内部呈现产品新组件。我已编辑了我的答案。现在您可以看到：-路由层次结构-主组件-产品组件-产品新组件请在您的问题中输入新代码，而不是answer、 您需要删除

产品

下的IndexRoute，并将

产品

路由更改为

。这将提供所需的路由。

<Header />
<div>{this.props.children}</div>
</Footer />

<Route path="/">
  <IndexRoute component={home}
  <Route path="products" component={products} />
</Route>

const browserHistory = useRouterHistory(createHistory)({basename: '/'});

ReactDOM.render(
  <Route history={browserHistory}>
    <Route path="/">
      <IndexRoute component={home} />
      <Route path="products" >
        <IndexRoute component={products} />
        <Route path="new" component={products_new} />
      </Route>
    </Route>
  </Router>,
  document.getElementById('content')
);