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 就可以被嵌套在页面里面了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,948评论 18 139
  • 我一直觉得觉醒是一件美妙的事情,但是它比较是发生在其他人身上的事情,而不是发生在我身上的事情。这是我的感觉,为什么...
    helenliu258阅读 763评论 0 0
  • 《五柳坡往事》 夏木荫荫水清浅,五柳坡下鸣高蝉。 一从古道通天渠,纷自功名往长安。 山暮送罢频招手,红尘梦落不胜寒...
    相山雨晨阅读 254评论 7 21
  • 佩奇一家去宿营,猪爸爸又展现了他高超的户外生活能力,想想我年初就说要去宿营说到年尾了还没去,待到明年可以去的时候估...
    无为育儿阅读 735评论 0 1
  • A Gathering Chicago Several former classmates wanted to h...
    Nancyxunan阅读 320评论 0 0