14、ReactRouter续
(2)抽象路由模块
1)新建page文件夹,存放组件
组件内容:
2)新建router文件夹,在其下创建实例
3)实例导入,使用
4)效果
(3)路由导航
1)作用:
实现路由系统中的多个路由之间需要进行路由跳转,并可能在跳转的同时进行传参的需求
2)分类
①声明式导航(通过【<Link to="跳转的路径" />】组件跳转)(传参可直接通过字符串拼接的方式传递)
效果:
②编程式导航
(4)路由导航传参
1)searchParams传参
①传参
②获取参数(先解构,再使用)
2)params传参(传递多个参数,采取同样的步骤)
①在router中,找到需要参数的路径,使用参数名进行占位
②传参
③获取参数(通过使用useParams得到需要的params,params.参数名获取)
(5)嵌套路由
1)概念:
在一级路由中又嵌套了其他路由(比如:嵌套至一级路由内的路由称为二级路由)
2)步骤
①准备一级路由和二级路由组件
②在router中配置路由路径
③使用
④效果
点击链接,进行切换