react动态路由的使用,二级三级页面的实际应用

本文介绍如何在React应用中实现动态路由,包括从首页跳转到列表页,列表页内的通过页、未通过页和其它页。通过页可进一步跳转到详情页,其它页则包含两个导航选项。利用withRouter处理第三方页面的路由信息,通过match方法获取路由参数,实现地址栏需求的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这个只有粉丝能看,所以知道啥意思就行,组件名,大解释什么的就不改了。(不要问为什么,懒!)

先说一下需求:首页跳到列表页,列表页里面有通过页面和未通过页面,还有一个其他页面。通过页面里有一个通过详情页,未通过里只显示未通过信息,其他页面里有两个选项,可以跳到选项一和选项二页面。

注意:第三方页面使用路由信息用withRouter,路由信息match方法。打印match可以给你帮助

这里写一下地址栏的需求:

list                     列表页
list/tong                列表通过页
list/tong/tongdetail     通过的详情页
list/notong              未通过页
list/qita                其他页面
list/qita/qi1            其他一页面
list/qita/qi2            其他二页面

App.js路由配置

<Route exact path="/list" component={Ce} />
<Route exact path={`/list/:page`} component={Ce} />
<Route path={`/list/:page/:id`} component={Ce} />

先说一下list页面,我定义的是 ceshi

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值