• 04-react基础知识-路由

    一、react路由环境安装

    使用指令：npm i --save react-router-dom @type/react-router-dom进行react路由环境安装

    二、引入路由

    在main.jsx文件中引入该语句：

    import { createBrowserRouter, RouterProvider } from 'react-router-dom'

    定义一个变量router来接收createBrowserRouter（【】）”【】“里面是每个路由 的path（路径），当访问的是path里的路径时，则访问element的组件。

    // 使用高阶组件，若要进行页面之间的跳转，必须使用suspense标签将其组件括起来，不然的话会报错嘞！！！

    1.最简单的写法

    1.  let router = createBrowserRouter([
    2.   {
    3. //页面访问的路径
    4.     path: '/home',
    5. //访问path路径时，页面显示element里的组件
    6.     element: <div>首页页面</div>
    7.   },
    8.    {
    9.      path: '/user',
    10.      element: <div>用户页面</div>
    11.    },
    12.    {
    13.      path: '/login',
    14.      element: <div>登录呀呀呀</div>
    15.    },
    16.  
    17.  ])

    2.进阶版一：访问相应的path页面，若要跳转到自己封装的组件

    需要使用到高阶组件

    如代码中load返回的是一个组件，然后element中使用该高阶组件进行懒加载，引入要访问的组件路径。即可

    3.最终版，也是代码比较少的一种写法

    1. import ReactDOM from 'react-dom/client'
    2. import { createBrowserRouter, RouterProvider } from 'react-router-dom'
    3. // 将path传进去
    4. let load = (path) => {
    5.   // 使用高阶组件，若要进行页面之间的跳转，必须使用suspense标签将其组件括起来，不然的话会报错嘞！！！
    6.   let Comp = React.lazy(() => import(path))
    7.   return (<React.Suspense>
    8.     <Comp></Comp>
    9.   </React.Suspense>)
    10. }
    11. let router = createBrowserRouter([
    12.   {
    13.     path: '/home',
    14.     element: load('./component/01-son.jsx')
    15.   },
    16.   {
    17.     path: '/granson',
    18.     element: load('./component/hook/02-granSon')
    19.   }
    20.  
    21. ])
    22. ReactDOM.createRoot(document.getElementById('root')).render(
    23.   // 在根组件中使用RouterProvider来提供路由功能
    24.   <RouterProvider router={router}></RouterProvider>
    25. )

    三、页面之间跳转（无参跳转）

    1.1Link标签和a标签的区别？

    两者都可以链接到网络地址，

    前者：当链接到当前项目中的路由的地址的话，不会刷新当前的网址，只是刷新当前的组件

    后者：链接到当前项目中的路由的地址的话，刷新的话当前网址会重新加载，页面重新刷新

    1.利用link标签进行跳转

    1. //son页面
    2.  
    3. import React, { useState } from 'react'
    4. import { Link } from 'react-router-dom'
    5. function Son() {
    6.     return (
    7.         <div>
    8.             <h2>son页面</h2>
    9.             {/* 使用link进行专拣之间的跳转：减少了页面刷新的次数 */}
    10.             <Link to='/granson'>跳转到granson页面</Link><br />
    11.  
    12.         //link标签跳转的第二种写法：to里面是两个花括号*****************************
    13.             <Link to={{ pathname: '/granson' }}>跳转</Link><br />
    14.  
    15.  
    16.             {/* a标签也可以实现页面跳转，但页面每次刷新，都会重新加载页面 */}
    17.             <a href="/granson">a标签跳转</a><br />
    18.             <Link to='http://www.baidu.com'>link链接到百度地址</Link><br />
    19.             <a href="'http://www.baidu.com">a链接到百度地址</a>
    20.         </div>
    21.     )
    22.  
    23. }
    24. export default Son
    25.  
    26.  
    27. //granson页面
    28.  
    29.  
    30.  
    31. import React, { useContext } from 'react'
    32. function Grandson() {
    33.     return (
    34.         <div>
    35.             <h5>Grandson页面</h5>
    36.  
    37.         </div>
    38.     )
    39. }
    40. export default Grandson

    2.用编程式写法进行页面之间的跳转

    代码中有编程式写法进行页面跳转的两种方式

    1. import React, { useState } from 'react'
    2. import { useNavigate } from 'react-router-dom'
    3. function Son() {
    4.     // 定义一个变量来接收刚刚引进来的函数
    5.     let router = useNavigate()
    6.     // 点击按钮router就去匹配相对应的组件进行跳转
    7.     // 编程式写法的第一种写法=====================================
    8.     function tiaozhuan() {
    9.         router('/granson')
    10.     }
    11.     // 编程式写法的第二种写法======================================
    12.     function tiao() {
    13.         router({ pathname: "/granson" })
    14.     }
    15.     return (
    16.         <div>
    17.             <h2>son页面</h2>
    18.             <button onClick={tiaozhuan}>点击跳转到granson页面</button><br /><br />
    19.             <button onClick={tiao}>点击跳转到granson页面</button>
    20.         </div>
    21.     )
    22.  
    23. }
    24. export default Son

    四、页面之间跳转（有参跳转）

            1.state传参（常用）

    使用编程式写法来进行传参：1.引入useNavitage函数

                                                    2.给定一个假的数据obj

                                                    3.定义一个变量来接收刚刚引入的useNavitage

                                                    4.useNavitage的两个参数：（1：要跳转的页面路径

                                                                                                   （2：state是要传递的数据

                                    跳转后的页面若要使用从前面传递过来的数据，则需要引入useLocation

                                                    5.用一个变量来接收引入的useLocation函数

                                                    7.在控制台打印，即可在state里面找到从前面传递过来的数据，并且可以在该页面正常使用。

    1. //son组件中====================================================================
    2.  
    3.  
    4. import React, { useState } from 'react'
    5. import { useNavigate } from 'react-router-dom'
    6. function Son() {
    7.     let [obj, setobj] = useState([{ id: 1, name: "衣服", price: "125元", comment: "质量挺好好哈" },
    8.     { id: 2, name: "裤子", price: "133元", comment: "真棒呀！！" },
    9.     { id: 3, name: "鞋子", price: "232元", comment: "不错哦" }])
    10.     let navigate = useNavigate()
    11.     console.log(obj);
    12.     function change(id) {
    13.         console.log(id);
    14.  
    15.  
    16.  
    17.         // 使用navigate实现页面跳转，state来进行传递参数，这里是将id传递过去
    18.         navigate({ pathname: "/granson" }, { state: { id } })
    19.     }
    20.     return (
    21.         <div>
    22.             <h2>son页面</h2>
    23.             <div>{obj.map(el => <div key={el.id}>
    24.                 <div>{el.name}</div>
    25.                 <div>{el.price}</div>
    26.                 <div>{el.comment}</div>
    27.                 {/* 点击button传递相应的参数id传递给change函数 */}
    28.                 <button onClick={() => { change(el.id) }}>点击跳转到granson页面</button>
    29.  
    30.             </div>)}
    31.             </div>
    32.         </div>
    33.     )
    34.  
    35. }
    36. export default Son
    37.  
    38. //granson组件中
    39.  
    40. import React, { useContext } from 'react'
    41. // 1.1在组件页面需要引入uselocation
    42. import { useLocation } from 'react-router-dom'
    43. function Grandson() {
    44.     //1.2： 用一个变量来接收uselocation函数
    45.     let obj = useLocation()
    46.     // 在控制台的state中可以看到从son组件中传递过来的id和obj数据
    47.     console.log(obj);
    48.     return (
    49.         <div>
    50.             <h5>Grandson页面</h5>
    51.             <div>{obj.state.id}</div>
    52.             {/* 在granson页面可以正常使用 */}
    53.             <div>{obj.state.obj[0].name}</div>
    54.  
    55.         </div>
    56.     )
    57. }
    58. export default Grandson
    59.  
    60.  
    61.  
    62.  
    63.

            2.query传参

                    1.引入useNavitage

                    2.定义一个变量来接收刚刚引入的useNavitage                

                    3.useNavitage的两个参数：（1：要跳转的页面路径

                                                                 （2：search是要传递的数据

                     跳转后的页面若要查看从前面传递过来的数据，则需要引入useLocation

                    4.用一个变量来接收引入的useLocation函数

                    7.在控制台打印，即可在search里面看到到从前面传递过来的数据，但不能直接取出来使用，需要自己去处理后才能正常使用

    1. /son组件中===============================================================================
    2.  
    3. import React, { useState } from 'react'
    4. import { useNavigate } from 'react-router-dom'
    5. function Son() {
    6.     let [obj, setobj] = useState([{ id: 1, name: "衣服", price: "125元", comment: "质量挺好好哈" },
    7.     { id: 2, name: "裤子", price: "133元", comment: "真棒呀！！" },
    8.     { id: 3, name: "鞋子", price: "232元", comment: "不错哦" }])
    9.     let navigate = useNavigate()
    10.     console.log(obj);
    11.     function change(id) {
    12.         console.log(id);
    13.         // 使用navigate实现页面跳转，search来进行传递参数
    14.         navigate({ pathname: "/granson", search: "id=32&name='衣服'" })
    15.     }
    16.     return (
    17.         <div>
    18.             <h2>son页面</h2>
    19.             <div>{obj.map(el => <div key={el.id}>
    20.                 <div>{el.name}</div>
    21.                 <div>{el.price}</div>
    22.                 <div>{el.comment}</div>
    23.                 {/* 点击button传递相应的参数id传递给change函数 */}
    24.                 <button onClick={() => { change(el.id) }}>点击跳转到granson页面</button>
    25.  
    26.             </div>)}
    27.             </div>
    28.         </div>
    29.     )
    30.  
    31. }
    32. export default Son
    33.  
    34.  
    35.  
    36.  
    37.  
    38.  
    39.  
    40.  
    41.  
    42. //granson组件中=====================================================================
    43.  
    44. import React, { useContext } from 'react'
    45. // 1.1在组件页面需要引入uselocation
    46. import { useLocation } from 'react-router-dom'
    47. function Grandson() {
    48.     //1.2： 用一个变量来接收uselocation函数
    49.     let obj = useLocation()
    50.     // 在控制台的state中的search可以看到传递过来的数据，但不能直接使用，需要自己进一步处理后再使用
    51.     console.log(obj);
    52.     return (
    53.         <div>
    54.             <h5>Grandson页面</h5>
    55.  
    56.  
    57.         </div>
    58.     )
    59. }
    60. export default Grandson

    state和query传参两者的区别：前者是传递过去了那边直接可以使用，后者是传递过去的数据需要自己进一步处理后才能使用。

            3.动态路由传参

    1. granson路由部分=========================================================
    2.  {
    3.     path: '/granson/:dt',
    4.     element: load('./component/hook/02-granSon')
    5.   }
    6.  
    7. //son组件部分=======================================================================
    8.  
    9. import React, { useState } from 'react'
    10. import { useNavigate } from 'react-router-dom'
    11. function Son() {
    12.     let navigate = useNavigate()
    13.     function change() {
    14.         // 在后面的控制台中的pathname中可以看到/granson/2023这个数据
    15.         navigate({ pathname: "/granson/2023" })
    16.     }
    17.     return (
    18.         <div>
    19.             <h2>son页面</h2>
    20.             <button onClick={change}>点击跳转到granson页面</button>
    21.         </div>
    22.     )
    23. }
    24. export default Son
    25.  
    26.  
    27. //granson组件组分==========================================================================
    28. import React, { useContext } from 'react'
    29. // 1.1在组件页面需要引入uselocation
    30. import { useLocation } from 'react-router-dom'
    31. function Grandson() {
    32.     //1.2： 用一个变量来接收uselocation函数
    33.     let obj = useLocation()
    34.     console.log(obj);
    35.     return (
    36.         <div>
    37.             <h5>Grandson页面</h5>
    38.         </div>
    39.     )
    40. }
    41. export default Grandson

    57行中传递了一个参数。

  • 相关阅读:
    yml中无法解析类 ‘HikariDataSource‘
    Python编程实例-Python的隐藏特性
    (01)ORB-SLAM2源码无死角解析-(58) 闭环线程→计算Sim3: 源码Sim3Solver::iterate()讲解
    【华为OD机试真题 python】解密犯罪时间 【2022 Q4 | 100分】
    【JVM笔记】堆的核心概述与堆空间大小的设置与查看
    2023最新SSM计算机毕业设计选题大全（附源码+LW）之java拼车平台0k47u
    香橙派 Kunpeng Pro 上手初体验
    Linux常⽤服务器构建-samba
    手把手教大家搭建微信公众号查题
    React 入门：组件实例三大属性之refs
  • 原文地址：https://blog.csdn.net/weixin_68211919/article/details/134270039