React04

目录

一、React路由

   1、下载安装

   2、API

      --路由模型：

      --路由输出：

      --定义路由规则：

      --路由跳转：

      --使用：

   3、路由重定向

   4、错误处理

   5、NavLink和Link

   6、嵌套路由

   7、默认路由

   8、编程导航

二、高阶组件

---

一、React路由

   1、下载安装

        最新版本：npm i react-router-dom

        指定版本：npm i react-router-dom@6.3.0

   2、API

      --路由模型：

         history模式:BrowserRouter

          使用h5的historyAPI实现，监听window的popstate事件来实现的

         hash模式:HashRouter

          使用URL的哈希值实现，监听window的hashchange事件来实现的

      --路由输出：

          Routes

      --定义路由规则：

          Route

      --路由跳转：

          Link、NavLink

      --使用：

          <BrowserRouter>

            <Link to="/路由地址">路由跳转</Link>

            <Routes>

              <Route path="/路由地址" element={路由跳转的元素}></Route>

            </Routes>

          </BrowserRouter>

   3、路由重定向

        借助NavigateAPI

        <Route path="/" element={<Navigate to="重定向地址"/>}></Route>

   4、错误处理

        1、定义一个错误处理的页面

        2、引入错误处理页面

        2、<Route path="*" element={<组件名>/>}></Route>

   5、NavLink和Link

        与Link功能一致，比Link多了一个高亮显示，要定义一个action样式

   6、嵌套路由

        Outlet：只针对二级路由输出

        1、在需要二级路由的一级路由组件中定义路由，使用<Outlet></Outlet>定义路由输出

           在嵌套路由中定义path路径时要跟上父路径

        2、路由规则在一级路由的路由规则中写二级路由的规则

          <Route path="/路径" element={<路由名/>}>

            //二级路由

            <Route path="/路径" element={<路由名/>}>

            </Route>

          </Router>

   7、默认路由

         在需要默认路由的位置将path="/路径"替换成index即可

   8、编程导航

        1、引入useNavigate钩子函数

        2、定义变量接收这个钩子函数返回的导航对象

          const navigate = useNavigate()

        3、需要跳转时

          navigate('/路由')

        4、可有第二个参数，表示替换路由，点击跳转路由时返回时，会回到最开始页面

          navigate('/路由',{repalce:true})

        5、当值为-1时，跳转到上一个路由

          navigate(-1)

        6、路由传参

          1、路由传参

            --传参：

              1、使用路由?后名称值对的方式传送参数

                navigate('/home?id=1001&name=jack')

            --接收参数：

              1、引入useSearchParams

              2、接收返回的数组，数组里面保存的是存储接收的参数对象

                const [params] = useSearchParams()

              3、接收参数

                {params.get('id')}

          2、动态路由传参

            --传参：

               1、使用路由后直接写参数

                 navigate('/home/1001')

               2、在传参的路由规则中定义传送的是什么值

                <Route path="/login/:id" element={<路由名/>}>

                </Route>

            --接收参数：

               1、引入useParams

               2、接收返回的对象，里面保存的是接收的参数对象

                const params = useParams()

               3、使用

                 {params.id}

二、高阶组件

      概念：

        接收一个组件参数，返回一个新的组件函数称为高阶组件，

        是一个有参有返回值的函数

      使用：

       例：定义一个tabbar高阶组件

        1、定义一个js文件创建一个函数返回一个类组件作为高阶组件

        2、函数参数中带入WrapperComponent

        function Index(WrapperComponent) {

            }

        3、在需要组件跳转的地方使用<WrapperComponent/>，类似站位

          <div className="g-main">

            <WrapperComponent />

          </div>

        4、定义tabbar的路由跳转，将函数暴露出去

          export default Index

        5、在定义路由处导入定义的tabbar高阶组件，然后定义一个变量接收这个返回的新组件

          let NewHome = Tabbar(Home)

        6、定义路由规则处element中写入这个新组件

          <Route path="/home" element={<NewHome/>}></Route>

      语法：

        function Index(WrapperComponent){

          return class index extend  Component{

            state = {} //状态

            render () {

              return (

                内容

              )

            }

          }

        }

        export default Index