React router v4 not working with Redux

后端 未结 2 1629
迷失自我
迷失自我 2020-12-25 13:31

Developing a React application using React router v4. All worked well until I introduced Redux in my app. Since then on click of links to change route the browser url change

相关标签:
2条回答
  • 2020-12-25 13:54

    Hah, now I'm making a project with react-router and redux too =).

    Look at the official documentation about redux integration https://reacttraining.com/react-router/web/guides/redux-integration.

    I think the main point is order of withRouter and connect Hocs.

    The problem is that Redux implements shouldComponentUpdate and there’s no indication that anything has changed if it isn’t receiving props from the router. This is straightforward to fix. Find where you connect your component and wrap it in withRouter.

    From the official docs.

    UPD

    import { withRouter } from 'react-router-dom';
    import { connect } from 'react-redux';
    
    class Home extends React.Component {...}
    
    export default withRouter(
        connect(mapStateToPropsFunc)(Home)
    );
    
    0 讨论(0)
  • 2020-12-25 14:08

    I'm using react-router-dom v4.1.1. It is working for me. Here is my Demo

    import React from 'react';
    
    import Reducer1 from 'yourReducer1';
    import Reducer2 from 'yourReducer2';
    
    
    import {
        Route,
        Switch as RouterSwitch
    } from 'react-router-dom';
    
    const App =()=> (
    <RouterSwitch>
        <Route path="/link1" exact component={Reducer1}/>
        <Route path="/link2" exact component={Reducer2}/>     
    </RouterSwitch>
    );
    
    export default App;
    

    Hope it is helpful for you ^^

    0 讨论(0)
提交回复
热议问题