react-router 4.0 路由嵌套问题

Question

app.js(最外面组件)

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

Login组件中没有layout布局，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组件。可是/layout/config 和 /layout/products 都是显示Home组件。

请问一下该如何修改代码才能显示正确？

Answer 1

<Route path="/layout/config" component={Config}/>
<Route path="/layout/products/:categoryId" component={Products}/>
react-router4需要写完整的路径吧

Answer 2

哈哈，抱歉，路径写完整试一下。。

Answer 3

我想问下，route直接写在 Content 组件里面，和用Children来使用有什么区别？

Answer 4

Route exact path="/layout/" component={Home}/>