React使用？/search和params传参（react 函数非类）

小明不在家

于 2023-05-05 16:51:17 发布

阅读量1k

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/ICUiseeyou/article/details/130506651

版权

前言

继昨日浅谈vite创建React以及简单的DOM

今天聊聊两种页面跳转传参方式search和params

后面学习使用类来画页面后再来说一下 state传参

页面跳转传参一

?传参

在vue项目里？传参然后用query接参而React项目则是用search来完成的

① 传递方组件

home.jsx

import { useNavigate } from 'react-router-dom'
import '../assets/css/home.css'

export default function Home(){

    const navigate = useNavigate() 
     // 非箭头函数
    function redirectToNotFound(){
        // 随意一个没有定义的路由 验证是否重定向
        navigate('/sdf')
    }
    const C = {
        width:'80%',
        border:'1px solid red',
        padding:'20px',
        margin:'0 auto'
    }

    // 1 定义数据
    const msg = '10086'
    // 2 使用？或search传参 箭头函数
    const toList = ()=>{
        navigate('/list?'+ msg)
    }
  
return(
<div style={C}>
<h1>this is home page</h1>
{/* 点击事件为 onClick */}
<p>search 传参</p>
<button style={{width:'180px',height:'30px',borderRadius:'30px',backgroundColor:'coral',color:'#fff'}} onClick={toList}>to list</button>
{/* 类名使用className */}
<button className='home' onClick={redirectToNotFound}>重定向跳转至404页面</button>
</div>
)

}

② 接收方组件

list.jsx

import { ListCss } from '../assets/css/list.js'
import '../assets/css/home.css'
// 1 引入useLocation方法
import { useLocation } from 'react-router-dom'
export default function list(){
// 2 拿到实例
const location = useLocation()
console.log(location);
// 3 赋值
const msg  = location.search.slice(1)
    
return(
<ListCss>
<h1>this is list page</h1>
<p className="list">使用插件styled-components写样式</p>
<hr />
<div className='C'>
<p>search 接参</p>
{/* 4 展示 */}
<p>msg:<span style={{color:'coral'}}>{msg}</span></p>
</div>
</ListCss>
)
}

看下效果：

有个疑问？

我明明定义的msg是10086 为什么传过来的search字段就变成了 ?10086 ?

所以取值时记得截取一下

当然对比query传参也可将search=取代？以对象式写法传参

search传参

只需改动传递方组件的第二步骤即可

home.jsx

    // 2 使用？或search传参 箭头函数
    const toList = ()=>{
        // ？传参
        // navigate('/list?'+msg)

        // search 对象式写法传参
        navigate({
            pathname:'/list',
            search:msg
        })
    }

看下动态效果：

这样与vue的query传参对比一下是不是就豁然开朗多了

页面刷新参数不会丢失

页面跳转传参二

params传参

① 在此之前先配置路由

src/router/index.jsx

② 传递方组件

home.jsx

import { useNavigate } from 'react-router-dom'
import '../assets/css/home.css'

export default function Home(){

    const navigate = useNavigate() 
     // 非箭头函数
    function redirectToNotFound(){
        // 随意一个没有定义的路由 验证是否重定向
        navigate('/sdf')
    }
    const C = {
        width:'80%',
        border:'1px solid red',
        padding:'20px',
        margin:'0 auto'
    }

    // 1 定义数据
    const msg = '10086'
    // 2 使用params传参 箭头函数
    const toList = ()=>{
        // params传参
        navigate(`/list/${msg}`)

        // ？传参
        // navigate('/list?'+msg)

        // search 对象式写法传参
        // navigate({
        //     pathname:'/list',
        //     search:msg
        // })
    }
  
return(
<div style={C}>
<h1>this is home page</h1>
{/* 点击事件为 onClick */}
<p>search 传参</p>
<button style={{width:'180px',height:'30px',borderRadius:'30px',backgroundColor:'coral',color:'#fff'}} onClick={toList}>to list</button>
{/* 类名使用className */}
<button className='home' onClick={redirectToNotFound}>重定向跳转至404页面</button>
</div>
)

}

③ 接收方组件

list.jsx

import { ListCss } from '../assets/css/list.js'
import '../assets/css/home.css'
// 1 引入useParams方法
import { useParams } from 'react-router-dom'
export default function list(){
// 2 拿到实例
const params = useParams()
console.log(params);
// 3 赋值
const msg  = params.msg
    
return(
<ListCss>
<h1>this is list page</h1>
<p className="list">使用插件styled-components写样式</p>
<hr />
<div className='C'>
<p>search 接参</p>
{/* 4 展示 */}
<p>msg:<span style={{color:'coral'}}>{msg}</span></p>
</div>
</ListCss>
)
}

效果：

动态效果：

大家都知道传递参数只能是字符串形式我们在传递数组或对象时都是用JSON.stringify()方法先转成字符串接收时用JSON.parse()方法再转回来

可在React项目里不行之前旧版本自带querystring方法现在好像也没了

最后找了半天使用 qs 这一插件可以实现

如果你有更好的方法也欢迎告知

下面使用search传递数组试试

① 下载插件 qs

npm i qs

② 传递方组件

home.jsx

import { useNavigate } from 'react-router-dom'
import '../assets/css/home.css'
// 1 引入插件 qs
import qs from 'qs'
export default function Home(){

    const navigate = useNavigate() 
     // 非箭头函数
    function redirectToNotFound(){
        // 随意一个没有定义的路由 验证是否重定向
        navigate('/sdf')
    }
    const C = {
        width:'80%',
        border:'1px solid red',
        padding:'20px',
        margin:'0 auto'
    }

    // 2 定义数据
    const list = [
        {
          id:1,
          content:'云青青兮欲雨，'
        },{
          id:2,
          content:'水澹澹兮生烟。'
        }
      ]
    // 3 使用search传参 箭头函数
    const toList = ()=>{
        // params传参
        navigate({
            pathname:'/list',
            search:qs.stringify({list}) // 记得加 {}
        })

        // ？传参
        // navigate('/list?'+msg)

        // search 对象式写法传参
        // navigate({
        //     pathname:'/list',
        //     search:msg
        // })
    }
  
return(
<div style={C}>
<h1>this is home page</h1>
{/* 点击事件为 onClick */}
<p>search 传参</p>
<button style={{width:'180px',height:'30px',borderRadius:'30px',backgroundColor:'coral',color:'#fff'}} onClick={toList}>to list</button>
{/* 类名使用className */}
<button className='home' onClick={redirectToNotFound}>重定向跳转至404页面</button>
</div>
)

}

③ 接收方组件

list.jsx

import { ListCss } from '../assets/css/list.js'
import '../assets/css/home.css'
// 1 引入插件 qs
import qs from 'qs'
// 1 引入useParams方法
import { useLocation } from 'react-router-dom'
export default function list(){
// 2 拿到实例
const location = useLocation()
console.log(qs.parse(location.search.slice(1)));
// 3 解构赋值
const { list }  = qs.parse(location.search.slice(1))
console.log(list);
// 4 循环列表 插值在DOM里 其中一种写法
function ListItem(){
   const item = list.map(item=><li style={{color:'coral',listStyle:'none'}} key={item.id}>{item.content}</li>)
   return <ul>{item}</ul>
} 
    
return(
<ListCss>
<h1>this is list page</h1>
<p className="list">使用插件styled-components写样式</p>
<hr />
<div className='C'>
<p>search 接参</p>
{/* 5 展示 */}
<ListItem></ListItem>
{/* <p>msg:<span style={{color:'coral'}}>{msg}</span></p> */}
</div>
</ListCss>
)
}

效果：