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

『荼』

已于 2022-04-27 11:12:48 修改

阅读量1.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js es6

于 2021-08-02 20:22:41 首次发布

本文链接：https://blog.youkuaiyun.com/l_ymttt/article/details/119332872

本文介绍如何在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

最低0.47元/天解锁文章