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

相关推荐
前端加油站8 分钟前
Chrome/Firefox 浏览器扩展开发完整指南
前端·chrome
码途进化论9 分钟前
从Chrome跳转到IE浏览器的完整解决方案
前端·javascript
笙年14 分钟前
Vue 基础配置新手总结
前端·javascript·vue.js
哆啦A梦158817 分钟前
40 token
前端·vue.js·node.js
炫饭第一名27 分钟前
Cursor 一年深度开发实践:前端开发的效率革命🚀
前端·程序员·ai编程
摇滚侠37 分钟前
Vue 项目实战《尚医通》,获取挂号医生的信息展示,笔记43
前端·javascript·vue.js·笔记·html5
晴殇i40 分钟前
关于前端基础快速跨入鸿蒙HarmonyOS开发
前端·harmonyos
k09331 小时前
vue3中基于AntDesign的Form嵌套表单的校验
前端·javascript·vue.js
茶憶1 小时前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app
没头脑和不高兴y1 小时前
Element-Plus-X:基于Vue 3的AI交互组件库
前端·javascript