• react路由01——react-routerV6 中路由传递参数的几种方式

    react路由01——react-routerV6 中路由传递参数的几种方式

    1. 前言

    1.1 关于react- router，上官网

    1.2 react脚手架demo

    2. 路由简单配置——无参数

    • 写法如下：
      在这里插入图片描述
    • 核心代码，如下：
       <Link to='/cats/info/'>
     {cat.catId}--{cat.catName}
 </Link>

      • 1
      • 2
      • 3
       <Routes>
      <Route path='info' element={<CatInfo/>} />
 </Routes>

      • 1
      • 2
      • 3
    • 效果
      在这里插入图片描述

    3. 路由传参方式

    3.1 params参数

    3.1.1 params参数——useParams钩子

    • 要求：路由表配置的位置添加参数占位。
    • 实现方式如下：
      在这里插入图片描述
    • 核心代码如下：
      • cats.jsx，如下：
        import React from "react";
import CatInfo from "./Info/CatInfo";
import {Route,Routes,Link} from 'react-router-dom'

class Cats extends React.Component{
    state = {
        cats:[
            {catId:'A1001',catName:'点点'},
            {catId:'A1002',catName:'阿苔'},
            {catId:'A1003',catName:'花花'}
        ]
    };
    render(){
        const {cats} = this.state;
        return(
            <div>
                <h2>猫咪信息</h2>
                <ul>
                    {
                        cats.map((cat)=>{
                            return(
                                <li key={cat.catId}>
                                    {/* 编写路由链接 */}
                                    <Link to={`/cats/info/${cat.catId}`}>
                                        {cat.catId}--{cat.catName}
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <br /><br />
                <Routes>
                    {/* 注册路由 */}
                     <Route path='info/:catId' element={<CatInfo/>} />
                </Routes>
            </div>
        )
    }
}
export default Cats;

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33
        • 34
        • 35
        • 36
        • 37
        • 38
        • 39
        • 40
        • 41
      • catInfo.jsx，如下：
        import React from "react";
import { useParams } from "react-router-dom";
import './catInfo.css'

//数据备用   根据传来的catId 查找要展示的数据
let catList = [
    {catId:'A1001',catName:'点点',catAge:5,catKind:'德文'},
    {catId:'A1002',catName:'阿苔',catAge:6,catKind:'德文'},
    {catId:'A1003',catName:'花花',catAge:2,catKind:'布偶'}
]

export default function CatInfo(){
    const {catId} = useParams();//获取路由传递来的参数
    // 根据传递过来的catId 查找对应的数据
    const cat = catList.find((obj)=>{
        return obj.catId === catId;
    })
    return(
        <div>
            <hr />
            <table>
                <caption>猫咪信息</caption>
                <thead>
                    <tr>
                        <th>编号</th><th>姓名</th><th>年龄</th><th>品种</th>
                    </tr>
                </thead>
                <tbody >
                    <tr>
                        <td>{cat.catId}</td>
                        <td>{cat.catName}</td>
                        <td>{cat.catAge}</td>
                        <td>{cat.catKind}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    )
}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33
        • 34
        • 35
        • 36
        • 37
        • 38
        • 39
    • 效果如下：
      在这里插入图片描述

    3.1.2 params参数——useMatch钩子

    • 传参数与上一致，如下：

      <li key={cat.catId}>
    {/* 编写路由链接 */}
    <Link to={`/cats/info/${cat.catId}/${cat.catName}`}>
            {cat.catId}--{cat.catName}
    </Link>
</li>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      <Routes>
    {/* 注册路由 */}
    <Route path='info/:catId/:catName' element={<CatInfo/>} />
</Routes>

      • 1
      • 2
      • 3
      • 4

    • 取参数如下：

      import { useMatch } from "react-router-dom";
const data = useMatch('/cats/info/:catId/:catName');
console.log(data);

const {params} = useMatch('/cats/info/:catId/:catName');
console.log(params.catName);

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

    • 效果如下：
      在这里插入图片描述

    3.2 search参数

    3.2.1 search参数——useSearchParams钩子

    3.2.1.1 官方介绍
    • useSearchParams 钩子用于读取和修改当前位置 URL 中的查询字符串。
    • 与 React 自己的 useState 钩子一样，useSearchParams 返回一个包含两个值的数组：当前位置的搜索参数和一个可用于更新参数的函数。
    • 与 React 的 useState 钩子一样，setSearchParams 也支持功能更新。因此，您可以提供一个接收 searchParams 并返回更新版本的函数。
    3.2.1.2 searchParams——读取
    • 说明：
      • search 传参的方式比较简单，参数的形式以 问号拼接 到地址后面。
      • 注册路由时不用占位。
    • 实现方式，如下：
      在这里插入图片描述
    • 核心代码，如下：
      • cats组件
        import React from "react";
import CatInfo from "./Info/CatInfo";
import {Route,Routes,Link} from 'react-router-dom'

class Cats extends React.Component{
    state = {
        cats:[
            {catId:'A1001',catName:'点点'},
            {catId:'A1002',catName:'阿苔'},
            {catId:'A1003',catName:'花花'}
        ]
    };
    render(){
        const {cats} = this.state;
        return(
        <div>
            <h2>猫咪信息</h2>
            <ul>
                {
                    cats.map((cat)=>{
                        return(
                            <li key={cat.catId}>
                                {/* 编写路由链接 */}
                                <Link to={`/cats/info?catId=${cat.catId}&catName=${cat.catName}`}>
                                    {cat.catId}--{cat.catName}
                                </Link>
                            </li>
                        )
                    })
                }
            </ul>
            <br /><br />
            <Routes>
                {/* 注册路由 */}
                    <Route path='info/' element={<CatInfo/>} />
            </Routes>
        </div>
        )
    }
}
export default Cats;

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33
        • 34
        • 35
        • 36
        • 37
        • 38
        • 39
        • 40
        • 41
      • catInfo组件
        import React from "react";
// import { useParams } from "react-router-dom";
import { useSearchParams } from "react-router-dom";
import './catInfo.css'

//数据备用   根据传来的catId 查找要展示的数据
let catList = [
    {catId:'A1001',catName:'点点',catAge:5,catKind:'德文'},
    {catId:'A1002',catName:'阿苔',catAge:6,catKind:'德文'},
    {catId:'A1003',catName:'花花',catAge:2,catKind:'布偶'}
]

export default function CatInfo(){
    // const {catId} = useParams();//获取路由传递来的参数
    let [searchParams, setSearchParams] = useSearchParams();// 获取问号传递来的参数
    // console.log(searchParams);
    const catId = searchParams.get('catId'); //取参数通过 searchParams.get('key')
    const catName = searchParams.get('catName');
    console.log(catId,'---->',catName);

    // 根据传递过来的catId 查找对应的数据
    const cat = catList.find((obj)=>{
        return obj.catId === catId;
    })
    return(
        <div>
            <hr />
            <table>
                <caption>猫咪信息</caption>
                <thead>
                    <tr>
                        <th>编号</th><th>姓名</th><th>年龄</th><th>品种</th>
                    </tr>
                </thead>
                <tbody >
                    <tr>
                        <td>{cat.catId}</td>
                        <td>{cat.catName}</td>
                        <td>{cat.catAge}</td>
                        <td>{cat.catKind}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    )
}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33
        • 34
        • 35
        • 36
        • 37
        • 38
        • 39
        • 40
        • 41
        • 42
        • 43
        • 44
        • 45
        • 46
    • 效果如下：
      在这里插入图片描述
    3.2.1.3 setSearchParams——修改
    • 看官网例子
      在这里插入图片描述
    • 举个小例子，如下：
      在这里插入图片描述

    3.2.2 search参数——useLocation钩子

    3.2.2.1 获取参数

    • 代码如下：

      import { useLocation } from "react-router-dom";


console.log("======使用useLocation======");
const data = useLocation();
console.log(data);

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

    • 效果如下：
      在这里插入图片描述

    3.2.2.1 将获取的Location参数转对象——query-string
    • 首先安装
      npm i query-string

      • 1
    • 引入 query-string 库
      import queryString from "query-string"

      • 1
    • 转换成对象
      const data = useLocation();
console.log(data);

const dataObj =  queryString.parse(data.search); //转对象
console.log(dataObj);

      • 1
      • 2
      • 3
      • 4
      • 5
      在这里插入图片描述
    • 效果如下：
      在这里插入图片描述
    • 补充——将对象转换成location参数形式：
      • 代码如下：
        console.log("======obj转location======");
const locationStr = queryString.stringify(dataObj);
console.log(locationStr);

        • 1
        • 2
        • 3
      • 效果如下：
        在这里插入图片描述

    3.3 state参数

    3.3.1 传参方式

    • 如下：
      在这里插入图片描述
       <li key={cat.catId}>
     {/* 编写路由链接 */}
     {/* 传递state参数 */}
     <Link to="/cats/info" state={{catId:cat.catId,catName:cat.catName}}>
         {cat.catId}--{cat.catName}
     </Link>
 </li>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      <Routes>
    {/* 注册路由 */}
    <Route path='info/' element={<CatInfo/>} />
</Routes>

      • 1
      • 2
      • 3
      • 4

    3.3.2 接受参数方式——useLocation钩子

    • 如下：

      import { useLocation } from "react-router-dom";

const data = useLocation();
let catId = data.state.catId;

      • 1
      • 2
      • 3
      • 4

      在这里插入图片描述

    3.3.3 效果

    • 如下：
      在这里插入图片描述

    4. 总结

    4.1 params参数

    取参方式，如下

    • useParams钩子

      • 路由链接 代码
        <Link to={`/cats/info/${cat.catId}`}>
	 {cat.catId}--{cat.catName}
</Link>

        • 1
        • 2
        • 3
      • 注册路由 代码
        <Routes>
	{/* 注册路由 */}
	<Route path='info/:catId' element={<CatInfo/>} />
</Routes>

        • 1
        • 2
        • 3
        • 4
      • 取参 代码
        import { useParams } from "react-router-dom";

const {catId} = useParams();//获取路由传递来的参数

        • 1
        • 2
        • 3

    • useMatch钩子

      • 路由链接 代码
        <Link to={`/cats/info/${cat.catId}/${cat.catName}`}>
        {cat.catId}--{cat.catName}
</Link>

        • 1
        • 2
        • 3
      • 注册路由 代码
        <Routes>
    {/* 注册路由 */}
    <Route path='info/:catId/:catName' element={<CatInfo/>} />
</Routes>

        • 1
        • 2
        • 3
        • 4
      • 取参 代码
        import { useMatch } from "react-router-dom";

const {params} = useMatch('/cats/info/:catId/:catName');
console.log(params.catName);

        • 1
        • 2
        • 3
        • 4

    4.2 search参数

    取参方式，如下

    • useSearchParams钩子
      • 路由链接 代码
        <Link to={`/cats/info?catId=${cat.catId}&catName=${cat.catName}`}>
    {cat.catId}--{cat.catName}
</Link>

        • 1
        • 2
        • 3
      • 注册路由 代码
        <Routes>
    {/* 注册路由 */}
    <Route path='info/' element={<CatInfo/>} />
</Routes>

        • 1
        • 2
        • 3
        • 4
      • 取参 代码
        import { useSearchParams } from "react-router-dom";

let [searchParams, setSearchParams] = useSearchParams();// 获取问号传递来的参数
// console.log(searchParams);
const catId = searchParams.get('catId'); //取参数通过 searchParams.get('key')
const catName = searchParams.get('catName');

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
    • useLocation钩子
      • 路由链接 代码（同上useSearchParams）
      • 注册路由 代码（同上useSearchParams）
      • 取参 代码
        import { useLocation } from "react-router-dom";
import queryString from "query-string"

const data = useLocation();
console.log(data);

const dataObj =  queryString.parse(data.search); //转对象
console.log(dataObj);

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8

    4.3 state参数

    取参方式，如下

    • useLocation钩子
      • 路由链接 代码
        {/* 传递state参数 */}
<Link to="/cats/info" state={{catId:cat.catId,catName:cat.catName}}>
    {cat.catId}--{cat.catName}
</Link>

        • 1
        • 2
        • 3
        • 4
      • 注册路由 代码
        <Routes>
    {/* 注册路由 */}
    <Route path='info/' element={<CatInfo/>} />
</Routes>

        • 1
        • 2
        • 3
        • 4
      • 取参 代码
        import { useLocation } from "react-router-dom";

const data = useLocation();
let catId = data.state.catId;

        • 1
        • 2
        • 3
        • 4
  • 相关阅读:
    c语言练习题83：#include“ “和#include＜＞的区别
    excel中vba简单应用
    PHP跨域解决
    SingletonKit单例源码阅读学习
    java毕业生设计校园租赁系统的设计与实现计算机源码+系统+mysql+调试部署+lw
    北斗导航 | 北斗/GNSS相关数据下载：IGS/IGMAS/MGEX/DCB/brdc/gamit/bernese/rinex等
    【JavaEE】_HTTP响应
    【云原生 | Kubernetes 系列】---Prometheus监控Nginx
    nacos启动指令
    【Git】在 Raspberry PI 上部署 Gogs
  • 原文地址：https://blog.csdn.net/suixinfeixiangfei/article/details/132873991