React学习day07-ReactRouter-抽象路由模块、路由导航、路由导航传参、嵌套路由、默认二级路由的设置、两种路由模式

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中配置路由路径

        ③使用

        ④效果

点击链接，进行切换

（6）默认二级路由

        1）作用：当访问一级路由时，默认的二级路由也可以得到渲染

        2）步骤：

        ①找到router下的路由路径配置，在二级路由的位置去掉path，设置index属性为true（可以在路径为/时，显示内容）

        ②在一级路由的组件中修改默认二级路由组件的路径（可以实现路径的正常切换）

        ③效果

（7）404路由配置（路径找不到时使用）

        1）准备404组件

        2）在router中配置路径（在路由数组的结尾，以*为path配置路由）

        3）效果

（8）两种路由模式

        1）history模式（ReactRouter由createBrowerRouter创建）

        ①底层原理：history对象+pushState事件

        ②路径显示：不带#

        ③不需要后端支持

        2）hash模式（ReactRouter由createHahRouter创建）

        ①底层原理：监听hashChange事件

        ②路径显示：带#

        ③需要后端支持

        3）切换（在router配置路由路径中将创建实例的函数导入、替换即可）