react router dom 中 没有 useNavigate

前端开发洋洋 前端开发洋洋 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 300+累计阅读 320平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄3年
关注
原创 最新推荐文章于 2026-10-08 13:16:39 发布 320 阅读 AI 写同款· GEO 优化 ›
react-router-dom v6的基本使用 在react中使用react-router 阅读详情

注意当前router版本，只有v6才有useNavigate

v6以下请使用useHistory！

（其实它俩用法很相似的）

const history = useHistory()

history.push(`/student/detail/${id}`)



const navigate = useNavigate()

navigate(`/student/detail/${id}`)

标签
#react.js #前端 #javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】 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 导入 react-router-dom@6.3.0版本,引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘

如上图所示报错,经过查阅学习: react-router-dom从V5升级到V6后，有些使用做了改变： (1) Switch 重命名为 Routes // v5中: exact 精确路由 component 组件 <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/profile" component={Profile}> ..

m0_63573982的博客 1053

react-router-dom V6中使用useNavigate

react-router-dom V6中使用useNavigate 最近在网上学习React编程式路由时跟着视频上的步骤写了之后发现V6版本有些变化，踩了不少的坑，在这里总结以下 1.编程实现路由导航 在以前的版本中可以直接使用this.props.history.push()和this.props.history.replace()来传递参数。 但在V6中开始使用useNavigate()了，如果要自己写功能实现页面跳转就不能使用Link标签了。但要注意：类式组件不能使用hooks函数，如果你的组件需要使

Clearlove_2019的博客 1万+

手把手教你用运放搭建方波三角波发生器（附Multisim仿真文件）

本文详细解析了使用运算放大器搭建方波和三角波发生器的核心原理与设计步骤。通过剖析迟滞比较器与积分器的联动机制，指导读者进行电路设计、元件选型，并借助Multisim仿真进行参数调优与波形优化。文章提供了从理论分析、虚拟仿真到实物焊接调试的完整实践指南，并附有仿真文件，帮助硬件爱好者与初学者深入掌握这一经典模拟电路设计。

weixin_29165725的博客 642

《二》React Router 手动路由的跳转、嵌套路由、动态路由、路由参数的传递、路由懒加载、通过配置的方式使用路由

上面的跳转，都必须通过点击 link 组件才能实现。React Router V5 中本身就是有 withRouter 这个高阶组件的。

花铛 5034

Cadence 设计实践笔记-小哥allegro 2层板笔记

规范建立文件夹本章节主要跟着B站PCB入门首选视频-小哥Cadence Allegro 2层板视频，结合自己的实践一步步完成一个完整的PCB板的设计。规范建立文件夹建立八个文件夹我使用的Cadence 17.4 有些差异原理图绘制原图绘制首先要熟悉原理图工作原理工作原理下面是这个项目的原理图重点关注电源新建原理图库打开Cadence 软件创建项目新建工程 File ==========》Project我这里选择了Enable PSPice 试试能不能仿真，新建项目如下。

我的专栏 1481

FPGA加速SNN实现MNIST手写数字识别的实践与优化

脉冲神经网络(SNN)作为第三代神经网络模型，采用生物启发的脉冲事件驱动机制，在处理时序信号时具有天然能效优势。其核心原理是通过神经元仅在接收足够输入脉冲时激活的稀疏特性，大幅降低计算能耗。在FPGA硬件加速领域，SNN通过量化优化、硬件友好型神经元模型设计等关键技术，可在边缘计算场景实现超高能效比。本文以MNIST手写数字识别为案例，详细解析了从6bit量化策略到双缓冲流水线设计的完整优化路径，最终在Xilinx Kintex-7平台实现97.54%识别准确率的同时，功耗仅231mW，能效比达81,712

weixin_30417487的博客 529

【react-router V6】useNavigate的使用

在【react-router-dom V6】useNavigate的使用

m0_52743009的博客 8463

Simulink玩转PMSM无感FOC：从IF强拖参数调试到切换失败的避坑指南

本文深入探讨了Simulink在PMSM无感FOC控制中的IF强拖启动参数调试与切换避坑技巧。通过详细解析强拖加速、速度维持和闭环切换三大阶段的设计逻辑，以及五个常见陷阱的解决方案，帮助工程师快速定位启动失败和切换震荡问题。文章还提供了典型故障的波形诊断方法和高级调试工具链优化建议，是电机控制领域的实用指南。

weixin_29164843的博客 408

ImportError: ‘useNavigate‘ is not exported from ‘react-router-dom‘

导入错误: 'useNavigate' is not exported from 'react-router-dom'

suiusoar 631

基于云平台的ATS系统微服务架构方案研究

在当前智慧地铁的升级转型过程中，城市轨道交通ATS系统面临着稳定性差、运维方 式繁琐和故障应急处理效率低等问题。为此，提出一种基于云平台的ATS系统微服务架构方案； 研究了ATS系统在云平台上的微服务总体架构、ATS应用的微服务划分和设计、容器部署方式 及通信交互模式，可实现系统松耦合和易扩展，达到节约计算资源、提高系统稳定性和运营效 率的目的

mi_lan1的博客 966

全志 camera: 4路AHD摄像头转MIPI

TP2815 驱动模块主要实现将 4 路的 AHD/TVI/CVBS Camera 的数据转换为 MIPI 数据，从而实现在 T527 端来对数据进行处理和送显。

Linux驱动开发工程师，熟悉Linux/Android底层驱动、TP、显示、IIC、网络等通用外设调试适配，Linux上层应用开发。常用平台瑞芯微、全志、恩智浦等。 9098

react-router-dom 6.x useNavigate() may be used only in the context of a ＜Router＞ component

Uncaught Error: useNavigate() may be used only in the context of a component. 未捕获错误:useNavigate()只可以用在<路由器>上下文的组件中。 原因：导航组件写到外面了！！！ 解决方法： 把要导航跳转的组件写到里面 如下假设： Header组件中有类似点击按钮等导航跳转操作，就需要将Header组件写到BrowserRouter的里边： Footer组件无类似操作，所以写到BrowserRouter的外边了

weixin_59141333的博客 3492

2025.05.29【Network】多组学分析：网络互作图绘制

本文介绍了使用R语言进行网络图绘制的方法与技巧。重点讲解了三个核心R包的使用：igraph用于网络图数据准备与基础绘制，ggraph基于图形语法实现高级可视化，networkD3则为网络图添加交互功能。文章涵盖了从基本概念、包安装、创建网络图对象，到自定义样式布局、添加交互性等完整流程，并提供了度分布、聚类系数等网络分析指标的计算方法。通过清晰的代码示例，帮助读者掌握生物信息学数据可视化的关键技能，为复杂数据的直观展示和分析提供实用工具。

227

React路由零基础入门：10分钟学会react-router-dom

这样当访问不同URL时，就会自动切换显示的页面内容。创建完成后，需要额外安装react-router-dom包，它是专门为web应用设计的路由库。NavLink是增强版Link，可以自动给当前激活的链接添加样式类，非常适合导航菜单的高亮显示。作为新手，我记录下自己的学习过程，用最直白的方式分享如何快速上手。当访问不存在的路径时，可以设置path='*'作为兜底路由，渲染自定义的NotFound组件。上实践，它的在线编辑器可以直接运行React项目，还能一键部署分享给别人访问，特别适合快速验证想法。

ObsidianRaven13的博客 547

RT-DETR改进目录一览 | 涉及卷积层、轻量化、注意力、损失函数、Backbone、SPPF、Neck、检测头等全方位改进

1️⃣本专栏已更新260多种不同的改进方法，所使用并改进的每一个模块均包含详细的模块分析、原理讲解、个人总结、多种改进方式以及完整的修改流程，所有改进100%可直接运行。2️⃣所有改进点均为近三年顶会，顶刊提出的先进算法，将其融入到中，紧跟学术热点，适应不同的任务场景。3️⃣团队内发表数篇SCI论文，熟悉完整的发表流程，订阅专栏即可进群享受模型训练、模型改进、论文写作、投稿选刊，从入门到论文的各种答疑内容。4️⃣专栏内容会持续更新，最近更新时间：2024-12-4。项目介绍在大家购买专栏后，加入学习

Limiiiing的博客 2万+

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Error:useNavigate() may be used only in the context of a ＜Router＞ component

你在 Next.js 的 App Router 或页面组件 中，直接使用了 react-router-dom 的 useNavigate。Next.js 有自己的路由系统（next/navigation），不默认包含 react-router。// 或者用 router.replace('/dashboard')navigate('/dashboard');

康宁的博客 356

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

react19【系列实用教程】react-router-dom —— 路由管理

类似 vue-router。

朝阳39的博客 4320

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

efm32 入门.pdf

本PDF共计22页，介绍的是操作驱动API，下载与否自己斟酌。

react报：export useHistory (imported as useHistory) was not found in react-router-dom

react-router-dom v4 可以使 withRouter (函数组件里可以用这个方法),当然 也可以直接 this.props.history.push。很明显 这个报错 是说 react-router-dom 里没有 useHistory。这个就涉及 react-router-dom这个插件的版本问题了。react-router-dom v5 是使用 useHistory。问题出在这里了 不同版本差异化，所以用之前需要确认版本。react-router-dom v6 里。..........

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！ 8352

react 路由 react-router-dom

react 路由 react-router-dom

pig_ning的博客 594

React路由

react路由 方面知识

m0_56683232的博客 481

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由组件传参的三种方式和 【React路由】编程式路由导航 回顾上篇文章👉🏻【React Router 6 快速上手一】，今天来学习react-router-dom6版本的另一些相关知识！ 感兴趣的小伙伴一起来看看吧~🤞.........

xuxuii的博客 1万+

react 19版中路由react-router-dom v7版的使用

注：在 React Router v7 中，不再使用 useHistory 钩子，React Router 采用了新的 API，其中包括使用 useNavigate 钩子来代替 useHistory。在router文件夹里面建一个index.tsx。在src目录下建一个router文件夹。再建一个router.tsx。

weixin_45791806的博客 1831

React学习记录，react-router-dom路由使用

2、index.js页面引入BrowserRouter，使用Router包裹<App />这样当页面渲染的时候就默认重定向跳转到home组件中，如果想要点击按钮跳转。5、将上面创建的index.js文件引入<App />中。3、创建文router文件夹，创建index.js文件。6、在需要使用跳转的页面引入useNavigate。1、下载react-router-dom；4、创建router.js文件。

wodenime的博客 427

【react中引入时报错问题】Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’

最近在学习react的过程中遇到了下面这个问题，就是switch和redirect的引入问题，我最开始下载react-router-dom插件的时候没有注意版本问题，所以就直接进行下载啦，但是在引入其中组件的时候会遇到一些问题，就是在进行路由重定向时，使用<Redirect></Redirect>这个标签时报错，最后查询到是react-router-dom在下载时要制定版本。1、先卸载之前的react-router-dom。就可以解决以上报错啦。

m0_59483744的博客 1010

【React】react-router-dom

路由

南栀的博客 2752
上一篇： React 自定义hook函数
下一篇： 超级简单的tab标签页
点赞 2
评论 0
书签 书签 0
前端开发洋洋
前端开发洋洋
博客等级 码龄3年 77粉丝 20原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值