Question

我在react-router上有一个反应应用程序。我正在尝试设置嵌套路由：

"/" --> 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。解决方案说：

我发现了我的问题。始终调用父路由。多数民众赞成的意图。但是儿童组件需要重复 <{1}}要渲染。

我无法理解这个解决方案。这是什么意思： “但子组件需要重复 <Router.RouteHandler/>要呈现“

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

我的路由层次结构：
```
<Router.RouteHandler/>
```

我的家庭组件：

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

我的产品组件：

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

我的产品 - 新组件：

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

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

1 个答案:

示例1

示例2

TL; DR