关于react-router v5 点击Link跳转时 路径改变页面没有刷新问题

最新推荐文章于 2024-04-25 22:22:12 发布
最新推荐文章于 2024-04-25 22:22:12 发布
阅读量1.2k 收藏 2
点赞数 7
分类专栏： React学习 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LL9808/article/details/127509238
版权

最近在学react-router v5,没曾想在第一步基础路由跳转这一块就过不去了，在点击Link跳转页面的时候，发现页面没有变化，但是地址栏地址变了，就很奇怪

 

，然后刷新一下之后，页面就变了，后来一直百度，试了好几种办法都没法解决，终于，功夫不负有心人，原来只需要把index.js中的<React.StrictMode>删掉即可。

修改之前~

修改之后~

成功跳转~

 第一次发帖，希望能帮助到大家~感谢

 

 

lanh@
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React服务器端渲染和使用。 寻找对React Router 3的支持，请参阅文档。 尝试React Router 5，尽管它很棒！ 用法 要安装koa-react-router ： npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所示： // index.js import Koa from 'koa' ; import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
最近把react-router 升级了一下， 在使用react-router-dom 是，子组件使用this.props.history 找不到了，看看官方文档，找了半天也没找到，因为我是在异步执行完后才跳转页面，需要用到push 或者replace，怎么办啊...
关于react-router 点击Link跳转时 路径改变页面没有刷新问题
yxd189的博客
02-12 1300
react-router 点击Link跳转时 路径改变页面没有刷新问题
记 vue-router 在微信浏览器中操作history URl未改变的解决方案
weixin_34220179的博客
04-16 746
背景 在PC端和手机浏览器中router.replace() or router.push()能够正常使用，页面的地址和页面都正常显示；但是在微信中，从/a页面通过router.push('/b')跳转到/b页面后，页面正常，但是复制浏览器的地址会发现其地址仍为/a;选择在浏览器打开发现也是显示的/a的页面。这应该是微信浏览器那边的问题，...
vue-router 回退不记录历史
u014520406的博客
05-19 1048
目录 一、场景说明 二、处理方案 1.router-link + history 2.编程式跳转 三、其他api跳转 一、场景说明 对于单页应用来说，经常会有登录后访问某个页面的场景。比如 /index -> /login -> /page1 但是在page1返回上一页时，会返回到登录页。回退路径为 /page1-> /login -> /index 因此需要进行跳过登录页的历史记录处理。 二、处理方案 1.router-link + his
React:使用＜Link＞组件进行页面跳转，url变化但是页面无变化
zhangzhuo1130的博客
11-21 1363
React:使用组件进行页面跳转，url变化但是页面无变化
解决Vue的router-link路由跳转但页面没有刷新问题
weixin_49884716的博客
11-15 4135
vue
解决vue项目路由跳转页面不变问题
jiangjunyuan168的博客
05-11 2568
问题： 今天在开发vue移动端项目的过程中发现了一个bug，就是当按返回键的时候页面并没有发生变化，一开始还以为是没有监听到返回事件，但是通过测试之后发现返回事件监听成功了，路由也发生了变化，相应事件也触发了，就是页面视图没有跟着改变。 解决方法： 项目中路由设置的是 hash模式，所以对 hashchange 事件进行监听（hash模式下，路由的变化会触发hashchange事件） 在App.vue中给hashchange绑定事件： mounted() { // 检测浏览器路由改变页面不刷新问题
react地址变了，但是页面不跳转问题
rng2uzi的博客
05-06 1949
今天遇到一个很奇怪的事情，写react项目时，引用各种组件，都不能实现编程式导航 和 link跳转 翻了半天文档不是叫你改react-router-dom的版本号 就是叫你加入withRouter跳转。这些都是表面实际开发时，各种无法跳转都没说到点上。 实际跟你的index.js有关 React.StrictMode 开启了严格模式导致你无法进行跳转，注释掉就可以正常的跳转了 ...
react项目生产环境路由变化但是页面不更新
程序员超超的博客
07-11 721
然后根据这篇文章的提示，把history和react-router-dom卸载掉，然后重新安装react-router-dom，这里其实不需要history，所有不需要安装history。搭建完毕之后，我在开发环境是没有问题的，也就是development，但是等切换到production模式之后，路由就失效了，也就是当切换路由的时候，浏览器url的路径是变化了，但是页面没有变化。所有搭建的时候踩了很多坑，并且有的包可能会有版本冲突问题或者安装的包根本就没用到。然后重启，问题解决了。
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案Route不匹配时，组件将被卸载阅读源代码之后Route ，我们发现使用...
react-router browserHistory刷新页面404问题解决方法
11-28
使用React开发新项目时，遇见了刷新页面，直接访问二级或三级路由时，访问失败，出现404或资源加载异常的情况，本篇针对此问题进行分析并总结解决方案。 背景 使用webpack-dev-server做本地开发服务器时，正常情况...
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
React基础知识大汇总
qq_36828822的博客
04-21 848
如果在多个组件中使用了相同的useEffect或useState逻辑，推荐将这些相同的逻辑封装到函数中，这些函数被称为自定义的Hooks。下面举例3个自定义的Hooks的示例。useForceUpdate：返回一个让组件重新渲染的函数。// 调用 forceUpdate 函数来强制组件重新渲染usePrevVal：获取状态的上一次的值，它利用了Ref的可变性，以及effect在DOM被绘制到屏幕上才执行的特性。
React18+TS+NestJS+GraphQL 全栈开发在线教育平台
juan9872的博客
04-23 368
React18、TypeScript、NestJS和GraphQL的完美结合为在线教育平台的全栈开发提供了无懈可击的支持。通过这种技术组合，我们可以快速构建出高效、稳定、可维护和可扩展的在线教育平台，满足用户不断增长的需求。本文将介绍React18、TypeScript、NestJS和GraphQL这四种技术的完美结合，为在线教育平台的全栈开发提供强大的支持。通过不断的实践和应用，我们可以不断优化技术组合，提高系统的性能和稳定性，为用户提供更加优质的教育服务。
初识reactor响应式编程
最新发布
mikewuhao的博客
04-25 262
Reactor响应式编程起源于数据流和变化的传播概念，其核心概念是由底层的执行模型通过数据流自动传播变化。这种编程范式最早由.NET平台上的Reactive Extensions (Rx)库实现，后来迁移到Java平台后，产生了著名的RxJava库，并衍生出Reactor等响应式编程库。Reactor是Pivotal旗下的项目，与Spring框架有着紧密的联系，是Spring WebFlux等响应式模块的“御用”响应式流。
【React Router】快速使用
小秀的博客
04-22 385
Outlet：相当于 Vue Router 的 router-view；需要有嵌套 ROute 或者 useRoutes 中使用children 属性的配置，children 对应一个数组，数组里是一个个路由。NavLink：和 Link 一样会被渲染为 a 标签，和 Link 的区别是他有一个名为 active 的激活样式，所以一般用于顶部或者左侧导航栏的跳转。Navigate：重定向，类似于 useNavigate 的返回值函数，但这个是组件。Route： 书写对应的路由和对应的组件。
react之响应事件
weixin_73918953的博客
04-24 791
你可以通过将函数作为 prop 传递给元素如来处理事件。必须传递事件处理函数，而非函数调用！，不是。你可以单独或者内联定义事件处理函数。事件处理函数在组件内部定义，所以它们可以访问 props。你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子组件。你可以根据特定于应用程序的名称定义事件处理函数的 prop。事件会向上传播。通过事件的第一个参数调用来防止这种情况。事件可能具有不需要的浏览器默认行为。调用来阻止这种情况。
【React】Sigma.js框架网络图-入门篇
无限循环
04-20 303
Sigma.js它使在Web页面上发布网络变得容易，并允许开发人员将网络探索集成到丰富的Web应用程序中。Sigma.js提供了许多内置功能，例如Canvas和WebGL渲染器或鼠标和触摸支持，以使用户在网页上的网络操作流畅且快速。通过使用Sigma.js，用户可以方便地创建和展示网络图，从而更好地理解和分析数据之间的关系。
react-router v5路由跳转
07-27
回答: 在使用react-router v5进行路由跳转时，首先需要安装react-router-dom依赖。如果你使用了TypeScript，还需要安装@types/react-router-dom来提供类型声明，以避免报错。\[1\]安装命令如下：npm i react-router-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值