react 动态修改路由_react.js - React 如何监听路由变化重新渲染组件

问题

// route.js

class NewsList extends Component {

componentWillMount () {

const type = this.props.location.pathname.replace('/', '') || 'top'

this.props.dispatch(fetchListData(type))

}

render () {

...

}

react: v15.6.1

react-router: v4.1.1

部分代码如上，现在的问题是切换路由时，组件并不会重新渲染。请问如何解决？

解决方案

为什么需要重新渲染组件？实质上，你想要的只是当路由变化，请求对应路由的数据而已。

那么考虑一下React组件的生命周期钩子。第一次加载时:

"constructor"

"componentWillMount"

"render"

"componentDidMount"

当组件的props发生改变时，组件更新，会调用如下的生命周期钩子

"componentWillReceiveProps"

"shouldComponentUpdate"

"componentWillUpdate"

"render"

"componentDidUpdate"

当路由变化时，即组件的props发生了变化，会调用componentWillReceiveProps等生命周期钩子

那我们所需要做的只是：当路由改变时，根据路由，也去请求一下数据就OK了，于是乎:

class NewsList extends Component {

componentDidMount () {

this.fetchData(this.props.location);

}

fetchData(location) {

const type = location.pathname.replace('/', '') || 'top'

this.props.dispatch(fetchListData(type))

}

componentWillReceiveProps(nextProps) {

if (nextProps.location.pathname != this.props.location.pathname) {

this.fetchData(nextProps.location);

}

render () {

...

}

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起

react 动态修改路由_react.js - React 如何监听路由变化重新渲染组件相关推荐

js给php注册网页添加实时监听,js 实现watch监听数据变化的代码
1.js /** * @desc 属性改变监听,属性被set时出发watch的方法,类似vue的watch * @author Jason * @study https://www.jianshu.c ...
React Hook 监听路由切换实时同步渲染页面功能
场景对于全局共用的顶部,需要在不同的路由状态下显示不同的信息.而一般情况下顶部通栏都是公共组件,一次引入各个页面通用.所以需要监听路由变化,实时渲染页面功能. // App.tsx export d ...
React Native - Keyboard API使用详解（监听处理键盘事件）
参考: React Native - Keyboard API使用详解(监听处理键盘事件) 当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入. 但有时我们想在键盘弹出时对页面布局做个调整, ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...
Vue--Router--解决watch监听路由无效的问题
原文网址:Vue--Router--解决watch监听路由无效的问题_IT利刃出鞘的博客-CSDN博客简介说明本文用实例介绍如何解决watch监听路由无效的问题. 需求有两个组件:CompA和 ...
node --- 监听文件变化(静态、动态、子进程)
静态版本:监听的文件名写死了 // watcher.js 'use strict' const fs = require('fs'); fs.watch('target.txt', () => ...
Android 第十九课大喇叭--广播机制----动态注册监听网络变化与静态注册实现开机启动
为了便于进行系统级别的消息通知,Android引入了一套广播消息机制. 1.广播机制简介: 因为Android中的每个应用程序都可以对自己感兴趣的广播尽心注册,这样程序只会接收自己所关心的广播内容, ...
前端路由的原生代码实现？前端如何监听路由变化？
前端如何监听路由的变化?如何根据前端路由的变化,去操作相应的DOM? 本文从前端层面上,大致解读一下,前端路由的监听与相关DOM操作的方法. 实现的基本原理: 首先,放置指定的DOM标识, 其次,当锚 ...

react 动态修改路由_react.js - React 如何监听路由变化重新渲染组件

react 动态修改路由_react.js - React 如何监听路由变化重新渲染组件相关推荐

最新文章

热门文章