React-router 4路由嵌套

Index 页面代码

<div>
    <TabBar>
        <TabBar.Item title='page页面' onPress={()=>this.props.history.push('/page')} />//点击跳转page页面
    </TabBar>
    <Route path={`${this.props.match.url}/item`}  component={Item} />
    <h1>Index</h1>
</div>

Index 显示结果

<TabBar /> //底部tabbar
<h1> Index </h1>

路由配置如下

<Router history={history}>
      <Switch>
        <Route path="/index"  component={App} />
      </Switch>
    </Router>

现在切换到 /index/item
显示结果如下：

<TabBar /> //底部tabbar
<h1> Index </h1>
<item></item>

现在item 就可以被嵌套在页面里面了