React:使用＜Link＞组件进行页面跳转，url变化但是页面无变化

最新推荐文章于 2023-07-11 10:12:00 发布
最新推荐文章于 2023-07-11 10:12:00 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangzhuo1130/article/details/127962920
版权

React:使用组件进行页面跳转，url变化但是页面无变化

记录：当前有个需求需要从A页面点击按钮跳到B页面，这两个页面我都是单独写的js文件，并且也在config.js文件里面写了引用地址，订好了url，但是无论我怎么点击，url变化了，但是页面dom还是没有变化，仍然是A页面的内容。在网上找了许多解决方案，但是仍然没有效果，最后问大佬原来是需要在config.js文件内修改，以下是修改方案
在这里插入图片描述

解决方案

  • 假设A页面路由是’/app/moduleA/pageA’，B页面的路由是’/app/moduleA/pageA/:id/pageB’，的时候需要在config文件，将B的路由引用内容放在A路由的上方。
  • 这样就可以跳转到正确的上面了
  • 因为如果A在上方前面的相同就会导致代码不往下继续找
  • 所以将给予A路由拼接的B路由放在A路由的上方
zhangzhuoz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决react路由点击不跳转，不报错，但URL地址会变化的问题
qq_45532769的博客
11-12 1222
解决react路由点击不跳转，不报错，但URL地址会变化的问题
React Router如何在url参数不同的情况下跳转页面不更新解决方案
01-20
React Router如何在url参数不同的情况下跳转页面不更新解决方案说明解决方案及思路componentWillReceiveProps（nextProps） 说明 场景如下： {item.productName} 当前页面相同的url参数不同，并不会去重新触发我们的componentDidMount函数。所以导致页面不会更新。 解决方案及思路 此时，我们就需要用到react生命周期中的componentWillReceiveProps函数。 componentWillReceiveProps（nextProps） 组件初次渲染时不会执行componentWillReceivePro
关于react-router v5 点击Link跳转时 路径改变页面没有刷新问题
LL9808的博客
10-25 1349
React Router 页面跳转不刷新问题
react项目生产环境路由变化但是页面不更新
最新发布
程序员超超的博客
07-11 829
然后根据这篇文章的提示，把history和react-router-dom卸载掉，然后重新安装react-router-dom，这里其实不需要history，所有不需要安装history。搭建完毕之后，我在开发环境是没有问题的，也就是development，但是等切换到production模式之后，路由就失效了，也就是当切换路由的时候，浏览器url的路径是变化了，但是页面没有变化。所有搭建的时候踩了很多坑，并且有的包可能会有版本冲突问题或者安装的包根本就没用到。然后重启，问题解决了。
【已解决】Vue的router-link地址变化但页面不刷新
蹦极的考拉
09-22 4486
由于最近搞了一般企业网站做练习，其中遇到各种的问题，今天无意中发现router-link点击产品的时候，列表页可以顺利进入详情页，但是详情页里面推荐产品却不能跳转。一般出现的情况：当前链接和政要点击的链接地址结构是一样的，就不能跳转了。（貌似是路由的过，因为路由结构本身没变化，所以网页不会刷新，而是变化的url而已）死活就是不跳转，但是url是变化的啊，抓耳挠腮大半天，查资料之后终于弄懂了这个问题。设置 router-view 的 key 属性值为 $route.fullPath。
vue2.0 keep-alive 路由跳转之后保留当前页面数据不变动
hyduan_h5的博客
05-27 4313
需求： 1：页面一数据由接口返回，修改部分数据， 2：数据仅前端页面调整，暂未提交修改数据库。 3：页面一跳转页面二，再由页面二返回页面一 4：页面一数据仍为修改后的数据 实现： 1：借用方式：keep-alive 2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染 一：在vue.app中添加keep-alive标签。 <template> <div id="app"> <keep-al.
react中link参数传递以及url乱码解决
Cupid
09-09 1601
react中link参数传递以及url乱码解决 1.可以通过动态路由的方式进行参数传递 ​ 传递：path="/acticle/:id" render() { return ( <div> <Link to="/acticle/1?"> 文章一</Link> ...
portfolio-react:使用React更新了作品集
04-13
React Router是一个常用的库，用于管理应用中的路由，使得URL与组件之间形成映射，实现页面间的无刷新跳转。在这个项目中，可能使用`BrowserRouter`、`Route`和`Link`等组件来定义和导航到不同的作品页面。 6. **...
详解react如何在组件中获取路由参数
08-30
在React应用中，路由管理是实现页面跳转和组件间通信的重要部分。React Router库提供了在组件中获取路由参数的功能，使得我们可以根据不同的参数来渲染不同的组件内容。下面将详细介绍如何在React组件中获取路由参数...
博客-应用程序React路由器：具有使用React-Router进行客户端路由的博客文章应用程序
02-14
4. **Link组件**：用于创建可点击的链接，它们不会导致浏览器跳转，而是通过React Router改变URL，触发对应的`Route`渲染。 **二、博客应用功能实现** 1. **获取所有用户**：这通常涉及后端API的调用，使用`fetch`...
Recipi_Blog:使用React制作博客应用程序的学校项目
04-04
- **路由概念**：React Router是React生态系统中的导航解决方案，它允许我们根据URL的变化在不同组件间切换，实现SPA的页面跳转。 - **Route组件**：在应用中，我们可以定义多个`<Route>`组件，每个对应一个URL...
react-responsive-site2:使用React Router，样式化组件和平滑滚动创建的响应式网站
05-10
在"shan-reactive-site2"中，我们可能看到如`BrowserRouter`, `Route`, `Link`等组件的使用，它们是React Router的核心组件，负责处理页面之间的跳转。 样式化组件（Styled Components）是一种流行的CSS-in-JS解决...
react-router路由地址变了页面却没有跳转的解决办法
weixin_34162401的博客
03-08 1万+
最近，自己在摸索react的时候，遇到一个很奇葩的问题，大概是这样的： 我从列表页使用Link跳转到详情页面，列表页面的路由是'/list'，详情页面的路由是'/list/detail'，由于详情页面的路由里边也包含了'/list'，所以在点击列表页面要去详情页时，地址栏里的地址变了，可详情页面却在列表页面里边直接加载出来了，导致俩页面成为一个页面了，这在我写vue的时候从来就不会出现的问题，怎么...
React 路由（Router、Link、Route）
jojo1001的博客
11-15 1147
React Router 1.Router Router我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件。 import { BrowserRouter as Router } from "react-router-dom"; class Main extends Component{ render(){ return( <Router> <div>
react Link跳转无效_React-Router源码解读
weixin_39709674的博客
11-20 420
起因目前负责的项目中有一个微信网页，用的是react技术栈。在该项目中增加了一个微信分享功能后，线上ios出现了问题，经排查，定位到了react的路由系统。 这次线上bug，让我决定，先从react-router-dom开始，看看它内部实现了什么。前端目前用到的就是react-router-dom这个库，它提供了两个高级路由器，分别是BrowserRouter和HashRouter，它两的区别就...
react 跳转后路由变了页面没刷新
热门推荐
qq_36990322的博客
04-29 2万+
问题 这样的问题貌似原因还挺多的，我的问题是带参数的url不能刷新，router 5.0版本 ，使用withRouter关联组件进行页面跳转 如下所示 路由代码 解决方案 在路由组件上最上层元素上加一个key增加路由的识别度，因为普通的跳转是根据path来识别的，但是path带上参数时，路由无法精确识别。不过，在跳转页面的时候，每个地址都会在localtion对象里添加一个key。如下打印 ...
Vuejs 用router-link跳转带参数到下一个页面
yjxfox的专栏
05-29 2991
在当前页面设置router-link <router-link class="normalBtn" tag="a" :to="{name:'historyRecordId',params: {id:radio}}" >下一步</router-link> 然后在下一个页面接收上一个页面带过来的参数 <script> export default { ...
react-router-dom
weixin_30496431的博客
09-23 456
进入项目目录，使用npm安装react-router-dom npm install react-router-dom --save-dev 然后我们新建俩个页面，分别命名为“home”和“detail”。在页面中编写如下代码: // home.js import React from 'react'; export default class Home ex...
emotion的使用（css-in-js)
zhangzhuo1130的博客
07-27 3456
import { css } from 'emotion'; 首先引入 let customStyle = css` & .ant-table-tbody { font-size: ${tableFontSize}; color: ${tableFontColor} !important; } &:hover .table-row > td { background: none; }
react 使用props.history.push怎么样使url变化 阻止页面的刷新
03-29
如果想要实现页面跳转而不刷新页面，可以使用React Router库中的<BrowserRouter>或<HashRouter>组件来进行路由管理，这些组件可以实现单页应用（SPA）的跳转效果。在React Router中，使用<Link>或<NavLink>组件可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值