2.React-Router 编程式导航---（跳转，携带参数跳转）

最新推荐文章于 2025-05-01 07:44:49 发布

原创

最新推荐文章于 2025-05-01 07:44:49 发布 · 812 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍了React-Router的编程式导航，包括如何实现页面跳转和携带参数跳转。在跳转时，可以通过useNavigate钩子函数进行操作，若不想添加历史记录，可以设置replace为true。对于参数传递，提供了searchParams和params两种方式，前者通过问号和参数进行传递，后者则在路由配置的path中添加动态id。

编程式导航-跳转

作用：通过js编程的方式进行路由页面跳转，比如登录页跳转到关于页

语法说明：
1.导入useNavigate钩子函数
2.执行钩子函数得到跳转函数
3.执行跳转函数完成跳转
注意：如果在跳转时不想加历史记录，可以添加额外参数replace为true

编程式导航-携带参数跳转

场景：有些时候不光需要跳转路由还需要传递参数

两种方式
1.searchParams传参（看个人喜欢）
传参路径后面加问号以及参数
接参顶部导入useSearchParams钩子，实例化为一个params数组，使用里面的get方法获取参数

//例如
import {
   
    useSearchParams } from 'react-router-dom';
const [params] = useSearchParams(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一本正经胡说八道熊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【React路由】编程式路由导航和withRouter的使用——push replace

m0_67403188的博客

07-31

237

借助this.props.history对象上的API对操作路由跳转、前进、后退。

在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

m0_61083409的博客

03-02

648

react-router-dom 编程式路由导航 (v5) 1.push跳转+携带params参数 props.history.push(`/b/child1/${id}/${title}`); 2.push跳转+携带search参数 props.history.push(`/b/child1?id=${id}&title=${title}`); 3.push跳转+携带state参数 props.history.push(`/b/child1`, { id, title }); 4.repl

参与评论您还未登录，请先登录后发表或查看评论

React编程式导航-跳转携带参数

xjx0121的博客

06-08

1989

场景：有些时候不光需要跳转路由还需要传递参数两种方式： App.js #路由配置 Login.js #跳转到detail页面并进行传参 Detail.js #取参 2.params传参 App.js #路由配置 Login.js #跳转到detail页面并进行传参 Detail.js #取参......

使用 React 路由器以编程方式导航

HuntsBot的博客

01-14

1374

使用 react-router，我可以使用 Link 元素创建由 react 路由器本地处理的链接。我在内部看到它调用 this.context.transitionTo(...)。我想做一个导航。不是来自链接，而是来自下拉选择（例如）。我怎样才能在代码中做到这一点？ this.context 是什么？我看到了 Navigation mixin，但是没有 mixins 我可以这样做吗？

使用React Router以编程方式导航

asdfgh0077的博客

12-10

2483

通过react-router我可以使用Link元素来创建由react路由器本地处理的链接。我在内部看到它调用this.context.transitionTo(...) 。我想从下

ReactRouter——路由配置、路由跳转、带参跳转、新route配置项

最新发布

2301_82023822的博客

05-01

1763

何时选择？大型应用：需要集中管理路由和数据流。复杂数据依赖：多路由共享数据、预加载需求。优化需求：流式渲染、代码分割、滚动恢复。未来扩展：计划迁移到服务端渲染（SSR）。最佳实践路由分层管理：拆分为多个路由配置文件。严格类型定义：结合 TypeScript 提升安全性。合理拆分组件：保持路由配置简洁清晰。性能监控：结合Suspense和懒加载优化首屏速度。

React-router

weixin_46920847的博客

08-21

769

react-router相关知识

react-router6 路由跳转传参和获取参数

03-12

### React Router v6 中的路由跳转传参方法在 React Router v6 中，可以通过多种方式实现在路由跳转时传递参数，并且可以在目标页面轻松获取这些参数。 #### 使用 `navigate` 函数进行路径匹配传参当执行编程式的导航操作时，可以利用 `useNavigate` Hook 提供的 `navigate` 方法来构建带有动态部分的新 URL。例如： ```javascript import { useNavigate } from 'react-router-dom'; function MyComponent() { const navigate = useNavigate(); function handleClick() { // 动态设置路径中的参数值 navigate(`/systemSet/list/${someId}`); } return ( <button onClick={handleClick}>Go to List</button> ); } ``` 这种方式适用于简单的 ID 或名称等作为路径的一部分传递给下一个页面[^2]。 #### 查询字符串形式附加额外数据对于更复杂的数据结构或者不想改变原有URL模式的情况下，则可以选择通过查询字符串的形式附带信息。这需要用到第三方库如 `qs` 来帮助序列化对象成查询串格式： ```javascript import qs from 'qs'; import { useNavigate } from 'react-router-dom'; function AnotherComponent() { const navigate = useNavigate(); function handleQuerySubmit(data) { let queryString = qs.stringify({ id: data.id, name: data.name }); navigate({ pathname: '/chargingStation/addCharginns', search: '?' + queryString }); } return /* ... */; } ``` 这样做的好处是在不影响整体 URL 设计的前提下增加了灵活性。 #### 利用状态(state)携带隐藏参数如果希望某些敏感的信息不暴露于浏览器地址栏中，那么还可以考虑采用 `state` 属性来进行跨页间通信。此特性允许开发者向即将访问的目标位置发送任意 JavaScript 对象而不必担心其可见性问题: ```javascript // 发送端 navigate('/chargingStation/addCharginns', { replace: false, state: { id: 100, name: 'zhufeng' } }); // 接收端 (新页面加载完成后立即读取) import { useLocation } from 'react-router-dom'; function TargetPage() { const location = useLocation(); useEffect(() => { console.log(location.state); }, [location]); return /* ... */ ; } ``` 这种方法非常适合处理那些不需要长期保存但在短时间内需要共享的状态信息。 #### 获取并解析路径参数为了能够接收到上述提到的各种类型的参数，在接收方组件内部应当相应地调用特定 Hooks 进行提取工作。比如要取得定义好的路径变量(`:id`)，则需依赖 `useParams()`；而对于查询字符串而言则是依靠 `useSearchParams()` 实现自动解码功能[^3]: ```typescript jsx import { useParams, useSearchParams } from 'react-router-dom'; const MyDocument = () => { const params = useParams(); // 解析 :id 类型参数 const [searchParams] = useSearchParams(); // 处理 ?key=value 形式 return ( <> Document Id is: {params.id}<br/> Query Param Name: {searchParams.get('name')} </> ) }; ``` 综上所述，React Router v6 提供了丰富的 API 支持不同场景下的需求，无论是简单还是复杂的参数交换都能得到妥善解决。