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

相关推荐
李白的天不白1 小时前
webpack 与 webpack-cli 版本匹配问题
前端·webpack·node.js
tool1 小时前
Hermes Agent 从安装到生产:我的完整踩坑记录
前端
kyriewen111 小时前
奥特曼借GPT-5.5干杯,而你的Copilot正按Token收钱
前端·gpt·ai·copilot
空中海1 小时前
01 React Native 基础、核心组件与布局体系
javascript·react native·react.js
空中海2 小时前
05 React架构设计、项目实践与专家清单
前端·react.js·前端框架
人生鹿呀2 小时前
AI 情绪陪伴助手:从 0 到 1 的 PWA + 跨端应用实战
前端
人生鹿呀2 小时前
从零打造滑板文化社区平台:React 19 + Node.js + AI 微服务全栈实战
前端
网络工程小王3 小时前
【LCEL 链式调用详解】调用篇-2
java·服务器·前端·数据库·人工智能
swipe3 小时前
别把语音 Agent 当成“接两个 API”——用 NestJS 搭一套 ASR + LLM + 流式 TTS 的实时语音助手
前端·后端·llm
GISer_Jing3 小时前
AI Agent中游产业链全景拆解:智能体开发的核心生态与技术版图
前端·人工智能·后端