详解React-Router中Url参数改变页面不刷新的解决办法

问题

今天在写页面的时候发现一个问题，就是在React Router中使用了Url传参的功能，像这样:

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

按照官方文档的说法，可以在ChannelPerPage这个组件中使用

this.props.match.params

来获取url参数的值，但是我发现如果你在这个url下只将url中的参数部分改变，比如channelId从1变成2的时候，页面并不会刷新。

解决办法

查阅资料后发现这样的根本原因是props的改变并不会引起组件的重新渲染，只有state的变化才会引起组件的重新渲染，而url参数属于props，故改变url参数并不会引起组件的重新渲染。

后来发现React的组件中有一个可复写的方法

componentWillReceiveProps(nextProps) {
 ...
}

这个方法可以在React组件中被复写，这个方法将会在props改变的时候被调用，所以你可以使用这个方法将nextProps获取到，并且在这个方法里面修改state的内容，这样就可以让组件重新被渲染。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • react-router JS 控制路由跳转实例
  • 详解升级react-router 4 踩坑指南
  • 使用react-router4.0实现重定向和404功能的方法
  • React-router 4 按需加载的实现方式及原理详解
  • react-router4 嵌套路由的使用方法
  • react-router中<Link/>的属性详解
  • React Router基础使用
  • 深入理解react-router@4.0 使用和源码解析
  • react-router实现跳转传值的方法示例
赞 (0)

相关推荐

  • react-router JS 控制路由跳转实例

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <

  • 深入理解react-router@4.0 使用和源码解析

    如果你已经是一个正在开发中的react应用,想要引入更好的管理路由功能.那么,react-router是你最好的选择~ react-router版本现今已经到4.0.0了,而上一个稳定版本还是2.8.1.相信我,如果你的项目中已经在使用react-router之前的版本,那一定要慎重的更新,因为新的版本是一次非常大的改动,如果你要更新,工作量并不小. 这篇文章不讨论版本的变化,只是讨论一下React-router4.0的用法和源码. 源码在这里:https://github.com/ReactT

  • react-router中<Link/>的属性详解

    本文主要给大家介绍了关于react-router中 的属性的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 使用Link标签 // 字符串定位描述符 String location descriptor. <Link to="/hello"> Hello </Link> // 对象定位描述符 Object location descriptor. <Link to={{ pathname: '/hello', query: { name: '

  • React-router 4 按需加载的实现方式及原理详解

    React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除,下面就介绍一下react-router4是入围和来实现按需加载的. 1.router3的按需加载方式 route3中实现按需加载只需要按照下面代码的方式实现就可以了. const about = (location, cb) => { require.ensure

  • react-router4 嵌套路由的使用方法

    react我自己还在摸索学习中,今天正好学习一下react-router4 嵌套路由的使用方法,顺便留着笔记 先直接贴代码 import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch} from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserH

  • 详解升级react-router 4 踩坑指南

    一.前言 上午把近日用React做的一个新闻项目所依赖的包升级到了最新的版本,其中从react-router(2.8.1)升级到react-router(4.1.2)中出现了很多问题, 故总结一下在升级过程中遇到的问题. 二.react-router,V4版本修改内容 1. 所有组件更改为从react-router-dom导入 之前的所有路由组件均是从react-router中导入,在我之前的项目中,导入相关组件如下: //v2 import {Router,Route,hashHistory}

  • 使用react-router4.0实现重定向和404功能的方法

    在开发中,重定向和404这种需求非常常见,使用React-router4.0可以使用Redirect进行重定向 最常用的就是用户登录之后自动跳转主页. import React, { Component } from 'react'; import axios from 'axios'; import { Redirect } from 'react-router-dom'; class Login extends Component{ constructor(){ super(); this.

  • react-router实现跳转传值的方法示例

    前言 本文主要给大家介绍了关于react-router跳转传值的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: react-router跳转传值 1.引入包 import {hashHistory} from 'React-router' 2.跳转传值 handleClick = (value) => { hashHistory.push({ pathname: 'message/detailMessage', query: { title:value.title, time:va

  • React Router基础使用

    React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单介绍其基础使用,更全面的可参考 指南 1. 它看起来像是这样 在页面文件中 在外部脚本文件中 2. 库的引入 React Router库的引入,有两种方式 2.1 浏览器直接引入 可以引用 这里 的浏览器版本,或者下载之后引入 然后就可以直接使用 ReactRouter 这个对象了,我们可能会使用到

  • 详解React-Router中Url参数改变页面不刷新的解决办法

    问题 今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样: export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch

  • 详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法

    详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法

    详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法 在Libgdx的使用过程中,经常会用到ScrollPane这个widget,来实现滑动效果, 如下所示: 但是如果想在上面的效果上添加一点扩展,比如ScrollPane中的Actor可以从ScrollPane中移出来,并添加到Stage中,则需要添加额外的逻辑 具体代码参考如下: /** * Created by Danny.姜 on 17/7/26. */ public class TestAdapter

  • 详解react应用中的DOM DIFF算法

    详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • 详解React 16 中的异常处理

    详解React 16 中的异常处理 异常处理 在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误.这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式.在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃:未被任何异常边界捕获的异常可能会导致

  • 详解react的两种动态改变css样式的方法

    第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.state = { display: true } this.handleshow = this.handleshow.bind(this) thi

  • 详解React Native中如何使用自定义的引用路径

    目录 RN的相对路径地狱 RN的自定义路径需要的依赖 解决自定义引用路径导致的eslint报错问题 RN的相对路径地狱 我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了.伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方

  • 详解idea文件右键创建New没有Create New Servlet的解决办法

    详解idea文件右键创建New没有Create New Servlet的解决办法

    第一步 第一步先看看 pom.xml 文件中有没有相关的依赖,需要在dependencies中添加Tomcat中关于jsp和servlet的jar. <dependencies> <!--看看有没有下面的这两个依赖 --> <!--看看有没有下面的这两个依赖 --> <!--依赖1 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jav

  • react纯函数组件setState更新页面不刷新的解决

    react纯函数组件setState更新页面不刷新的解决

    目录 问题描述: 原因分析: 解决方案: 补:react中,hooks钩子时useState更新不渲染组件的问题 问题描述: const [textList, setTextList] = useState(原数组); setTextList(新数组); 当修改原数组时,如果原数组是个深层数组(不只一层),使用setTextList修改时,不会触发页面刷新 原因分析: 这个涉及到可变对象he不可变对象的知识,在vue和react中,如果更新可变对象时,可能会引起视图更新,这是因为,vue和rea

  • 详解React项目中碰到的IE问题

    最近接手一个React项目,在IE下碰到了俩问题 IE11报错如下: 跟踪一下之后,发现是一些其他的npm包里面用到了startsWith这个方法,可以自己polyfill一下: if (!String.prototype.startsWith) { String.prototype.startsWith = function (search, pos) { return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === sea

  • 详解React项目中eslint使用百度风格

    详解React项目中eslint使用百度风格

    1.安装百度Eslint Rule 插件 npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config // react项目 npm i -D eslint-plugin-react eslint-plugin-react-hooks // 如果需要支持typescript的话 npm i -D @typescript-eslint/parser @typescript-eslint/eslint-

随机推荐