关于ReactV18的页面跳转传参和接收

一、使用路由方式进行传参和接收(此处需使用 useNavigate 和 useParams 两个hooks)

1 首先需要配置好路由形式如下 :id(参数)

{

path: "/articleDetail/:id",

element: lazyElement(<ArticleDetail />),

},

2 传递参数 使用 useNavigate

navigate("/published", { state: { articleName: props.Title } });

3 接收参数 使用 useParams

const { id } = useParams();

二、使用地址方式进行(此处需使用 useNavigate 和 useSearchParams 两个hooks)

navigate('/login?name=xiaoming&age=10')传参
const [getSearchArr] = useSearchParams();接收

使用 getSearchArr.getAll("SearchKey")获取详细值

相关推荐
树下水月3 分钟前
纯HTML 调用摄像头 获取拍照后的图片的base64
前端·javascript·html
蜗牛攻城狮7 分钟前
Vue 中 `scoped` 样式的实现原理详解
前端·javascript·vue.js
豆苗学前端12 分钟前
前端工程化终极指南(Webpack + Gulp + Vite + 实战项目)
前端·javascript
比老马还六13 分钟前
Bipes项目二次开发/海龟编程(六)
前端·javascript
梨子同志13 分钟前
Node.js 文件系统 fs
前端
码农胖大海14 分钟前
微前端架构(二):封装与实现
前端
瘦的可以下饭了15 分钟前
2 数组 递归 复杂度 字符串
前端·javascript
Kellen15 分钟前
ReactDOM.preload
前端·react.js
weixin_4624462332 分钟前
nodejs 下使用 Prettier 美化单个 JS 文件(完整教程)
开发语言·javascript·ecmascript
岭子笑笑1 小时前
vant 4 之loading组件源码阅读
前端