react-router 4.0 路由嵌套問題

app.js(最外面組件)

<Router history={customHistory}>
                <div>
                    <Route  path="/layout" component={MyLayout}/>
                    <Route  path="/login" component={Login}/>
                </div>
</Router>

Login組件中沒有l(wèi)ayout布局，MyLayout組件中有左右布局的layout。

MyLayout組件

 <Layout>
  <HeaderCustom toggle={this.toggle} collapsed={this.state.collapsed} responsive={responsive} />
                    <Content  style={{ margin: '0 16px', overflow: 'initial' }}>
                             <Route   path="/" component={Home}/>
                            <Route  path="/config" component={Config}/>
                            <Route  path="/products" component={Category}/>
                            <Route  path="/products/:categoryId" component={Products}/>
                            <Route  path="/products/:categoryId/:productId" component={ProductDetail}/>
                            <Route  path="/news" component={News}/>
                            <Route  path="/data" component={Data}/>

                    </Content>
 <Layout>

設想是/layout的時候顯示Home組件，/layout/config顯示Config組件，/layout/products顯示Products組件?？墒?code>/layout/config 和 /layout/products 都是顯示Home組件。

請問一下該如何修改代碼才能顯示正確？