React-router：嵌套路由如何工作？

Question

我有一个带有 react-router 的 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>

现在在我的默认主页的浏览器中，当我点击"/products" 时，产品组件已加载，我可以看到我的产品列表。但是当我点击"products/new" 时，什么也没有发生。我得到一个空白页。如果我点击"/new"（未嵌套）它可以工作（页面 product_new 加载到其父级中）。 （这个"/products/new" 不起作用；这个"/new" 起作用）

我在 github 上查看了这个问题 Problem with nested routes #687。解决方案说：

我发现了我的问题。总是调用父路由。那就是 意图。但是子组件需要重复 <Router.RouteHandler/> 得到渲染。

我无法理解这个解决方案。这是什么意思： "但是子组件需要重复 <Router.RouteHandler/> 被渲染”

EDIT1： 这是我的组件（路由器和视图）：

1. 我的路由层次结构：

               <Route path="/" >    
                       <IndexRoute component={Home}/>
                       <Route path="products">
                           <IndexRoute component={Products} />
                           <Route path="new" component={Products_New} />
                       </Route>
                   </Route>                        
               </Router>
   

2. 我的家庭组件：

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

3. 我的产品组件：

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

4. 我的产品新组件：

Answer 1

您看过 IndexRoutes 吗？如果没有，请在official documentation 上阅读它。您的问题是，当您访问 /products/new 时，react-router 会尝试渲染您的 products_new 路由上方的 所有 组件。

如果您想在父组件内部呈现子组件，则需要此行为。请允许我用几个例子来演示：

示例 1

考虑以下home 组件，它有一个包含在所有页面中的页眉和页脚。

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

使用以下路由：

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

• 访问/ 将呈现一个只有<Header />、空<div> 和<Footer /> 的页面。
• 访问/products 会呈现如上所示的页面，但<div> 现在将包含您的<Products /> 组件。

因为，在您的代码中，您（可能）不会渲染 {this.props.children}，因此无论您访问的是 / 还是 /products，您都将始终获得父组件 <Home />。

这种行为对于包装网站主要元素的东西很有用，例如菜单、横幅、侧边栏等。

---

示例 2

现在再次考虑相同的home 组件：

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

但使用此路由：

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

• 访问/ 将呈现一个只有<Header />、空<div> 和<Footer /> 的页面。
• 现在访问/products 会单独呈现您的<Products /> 组件，而不会被包裹在父<Home /> 组件中。

---

TL;DR

如果您希望每条路由都渲染单个组件，而不是该路由树下的所有内容，则应改用以下路由：

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