reactjs - 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 。解决方案说:

I discovered my problem. Parent routes are always called. Thats the intent. But child components need to have repeated <Router.RouteHandler/> to get rendered.

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

编辑1:这是我的组件(路由器和 View ):

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}你将永远得到父<Home />组件，无论您是否访问过 /或/products .

此行为对于包装网站主要元素的内容非常有用，例如菜单、横幅、侧边栏等。

<小时/>

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