参考文档:https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates
异常现象点击Link url 变化但是页面不更新
出现此问题的条件:
1.使用了react-reduct 的connect
2.Router与Root 之间有 有layout布局 元素
解决办法:withRouter 包裹组件
原因:react-reduct shouldComponentUpdate 没有接收到任何属性改变,因此不再重新绘制页面
var Home = withRouter (connect()(() => <Link to={"Cal"}>Home 点击到子页面 </Link>)) var Cal = withRouter( connect()(() => <div>Cal <Link to={"/Home"}>回到首页</Link></div>)) var Layout =withRouter ( connect()((props) => <div>头{props.children}尾</div>))
异常代码如下
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()(() => <Link to={"Cal"}>Home 点击到子页面 </Link>) var Cal = connect()(() => <div>Cal <Link to={"/Home"}>回到首页</Link></div>) var Layout = connect()((props) => <div>头{props.children}尾</div>) ReactDOM.render( <Provider store={store}> <Router> <div> <Layout> <Switch> <Route exact path="/Home" component={Home}/> <Route path="/Cal" component={Cal}/> </Switch> </Layout> </div> </Router> </Provider>,document.getElementById('root') )
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。