react-router与react-reduct配合使用时页面不刷新问题解决方法

异常现象点击Link url 变化但是页面不更新

出现此问题的条件：

1.使用了react-reduct 的connect

2.Router与Root 之间有有layout布局元素

解决办法：withRouter 包裹组件

原因：react-reduct shouldComponentUpdate 没有接收到任何属性改变，因此不再重新绘制页面

1	`var Home = withRouter (connect()(() =>`

Home 点击到子页面 )) var Cal = withRouter( connect()(() =>

Cal

回到首页)) var Layout =withRouter ( connect()((props) =>

头{props.children}尾

))

异常代码如下

import React from 'react'

import ReactDOM from 'react-dom'

import {createStore} from 'redux'

import {Provider, connect} from 'react-redux'

import {Route, Switch, Link, BrowserRouter as Router} from 'react-router-dom' ;

const store = createStore(

function* (state, action) {

return state

}

)

var Home = connect()(() =>

Home 点击到子页面 ) var Cal = connect()(() =>

Cal

回到首页) var Layout = connect()((props) =>

头{props.children}尾

) ReactDOM.render(

, document.getElementById('root') )

react-router与react-reduct配合使用时页面不刷新问题解决方法相关推荐

phpcms v9 后台添加修改页面空白页问题解决方法
phpcms v9 后台添加修改页面空白页问题解决方法参考文章: (1)phpcms v9 后台添加修改页面空白页问题解决方法 (2)https://www.cnblogs.com/thinking ...
Eclipse build Android时不生成apk问题解决方法
Eclipse build Android时不生成apk问题解决方法参考文章: (1)Eclipse build Android时不生成apk问题解决方法 (2)https://www.cnblog ...
springBoot上传文件时MultipartFile报空问题解决方法
springBoot上传文件时MultipartFile报空问题解决方法参考文章: (1)springBoot上传文件时MultipartFile报空问题解决方法 (2)https://www.cn ...
linux ftp 550 下载,linux ftp服务器上传文件夹时提示550错误问题解决方法
linux ftp服务器上传文件夹时提示550错误问题解决方法标签: linux ftp服务器 550 中文文件夹上传错误问题分类: 计算机 2010-11-06 22:47 前几天在实验室搭配 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
【Vue】组件复用导致的路由切换时页面不刷新问题
页面逻辑通过router-link,携带不同params参数,导航向同一个组件. 出现问题1 不同路由切换时组件上的页面不刷新. 问题原因1 mounted() {this.getData();}, ...
h5上下滑动时页面出现抖动问题解决
h5页面加载列表使用SUI中infinite-scroll. 上下滑动时页面出现抖动,尝试了多种办法依然解决不了. 最终解决办法 <div style="overflow: auto; ...
Vue移动端开发IOS浏览器回退时页面不刷新或未正常发起请求
移动端微信公众号项目进行UAT测试时遇到一个问题,ios微信浏览器访问项目时回退上一级页面异常,未刷新.网上看的是由于ios回退是从缓存中读取数据的,由于开发环境不方便测试,找到如下解决方法经测试是 ...
谷歌浏览器调试时页面的刷新与强制刷新+清空缓存的操作
浏览器的刷新一般分为三种类型,即:1.正常重新加载.2.硬性重新加载(强制刷新).3.清空缓存并硬性重新加载 1.正常重新加载触发方式:① F5 ② Ctrl + R ③ ...

react-router与react-reduct配合使用时页面不刷新问题解决方法

react-router与react-reduct配合使用时页面不刷新问题解决方法相关推荐

最新文章

热门文章