Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React router v4 not working with Redux

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 changes but the component corresponding to the route is not getting loaded. It works well if I comment out Redux code. What could be causing this? Here is my code for routing:

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import LeftSubDefault from './../components/left-sub-default.component';
import LeftSubOne from './../components/left-sub-one.component';
import LeftSubTwo from './../components/left-sub-two.component';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";

class LeftComponent extends Component {
  render() {
    return (
      <div className="col-xs-6">
          <p>
            Current sub route: {this.props.currentRoute}
          </p>
          <ul>
            <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
            <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
            <li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li>
          </ul>
          <Switch>
            <Route exact path='/' component={LeftSubDefault} />
            <Route exact path='/left-sub1' component={LeftSubOne} />
            <Route exact path='/left-sub2' component={LeftSubTwo} />
          </Switch>
      </div>
    );
  }
}
const mapStateToProps = (store) => {
  return {
    currentRoute: store.routes.currentRoute
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    goToDefault: () => {
      dispatch(goToLeftDefault())
    },
    goToSub1: () => {
      dispatch(goToLeftOne())
    },
    goToSub2: () => {
      dispatch(goToLeftTwo())
    }
  };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LeftComponent));

PS: I get no error in console. The code runs clean just components don't load. Here is a similar thread on github: 4671. I have seen lot of threads on various sites but none has the solution for this issue.

like image 289
Peter Avatar asked Jul 12 '17 11:07

Peter


People also ask

Does Redux work with React Router?

You can use the connected-react-router library (formerly known as react-router-redux ). Their Github Repo details the steps for the integration. Once the setup is complete, you can now access the router state directly within Redux as well as dispatch actions to modify the router state within Redux actions.

Is React-Router-Redux deprecated?

The project is deprecated, as noted on the react-router-redux github repo. You can still use it if you want, but you may have some fears using a deprecated library in production.

What are the Router components of React v4?

There are three primary categories of components in React Router: routers, like <BrowserRouter> and <HashRouter> route matchers, like <Route> and <Switch> and navigation, like <Link> , <NavLink> , and <Redirect>

Is React Router deprecated?

This feature has been deprecated because the new structure of Routes is that they should act like components, so you should take advantage of component lifecycle methods instead.


2 Answers

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)
);
like image 120
Ivan Burnaev Avatar answered Oct 19 '22 15:10

Ivan Burnaev


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 ^^

like image 33
Voi Mập Avatar answered Oct 19 '22 14:10

Voi Mập