关于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")获取详细值

相关推荐
yinuo5 分钟前
uniapp换肤最佳实践
前端
XboxYan1 小时前
CSS 小技巧:如何将 img 转换成 background-image
前端·css
辉长六加12 小时前
nodejs和vue安装步骤记录
前端·javascript·vue.js·npm·node.js
coding随想2 小时前
掌控网页的灵魂!揭秘DOM事件中鼠标与滚轮的终极操控术
前端
Jerry3 小时前
Compose 基础知识测试
前端
changuncle3 小时前
Angular初学者入门第三课——工厂函数(精品)
前端·javascript·angular.js
ScottePerk3 小时前
前端安全之XSS和CSRF
前端·安全·xss
PineappleCoder3 小时前
Canvas 复杂交互步骤:从事件监听 to 重新绘制全流程
前端
日月晨曦3 小时前
JavaScript事件循环:一次浏览器线程的"约会"指南
javascript
s3xysteak3 小时前
我要成为vue高手01:上下文
前端·javascript·vue.js