react-router 与react-reduct 配合使用时,页面不刷新问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ISaiSai/article/details/78088823

参考文档: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')
)
展开阅读全文

没有更多推荐了,返回首页