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

相关推荐
祈澈菇凉2 分钟前
如何使用useContext进行全局状态管理?
前端·javascript·react.js
澄江静如练_1 小时前
vue3中的标签属性中的Ref
前端·javascript·vue.js
GIS好难学1 小时前
考研出分24小时,人类精神状态图鉴
前端·考研·gis·gis开发·webgis·地信
斯~内克1 小时前
React Router 完全指南:从基础到高级实践
前端·react.js·前端框架
IT、木易1 小时前
大白话React第八章React 深入进阶与实践拓展阶段
javascript·react.js·ecmascript
m0_748232392 小时前
qwenvl 以及qwenvl 2 模型架构理解
android·前端·后端
冲!!2 小时前
vue3中ref和reactive响应式数据、ref模板引用(组合式和选项式区别)、组件ref的使用
前端·javascript·vue.js
匹马夕阳2 小时前
React vs Vue3深度对比与使用场景分析
前端·react.js·前端框架
一路向前的月光2 小时前
React(11)路由demo
javascript·react.js·ecmascript
浪遏2 小时前
2025年2月凉面与热面(2)—— 还没开始就结束了🤡?
前端·面试