React Router willTransitionTo Not Firing

[jstrimpel]

I am new to react, react-router, and redux - 1 day to be precise - so please bear with me. I created a basic example from the redux examples, https://github.com/jstrimpel/redux-react-router. The issue I am facing is that I cannot get static willTransitionTo to fire. I have added one to both the ./Root.js and ./App.js components. Any help would be greatly appreciated. I tried joining the recommended Slack community to get help, but it fails to send me an invite email.

[sergey-lapin]

Please check this out acdlite/redux-router#4. This is not redux issue but https://github.com/acdlite/redux-react-router. So I guess this should be closed.

[jstrimpel]

Thanks.

[gaearon]

@Lapanoid That's a different issue.

@jstrimpel The problem is you're declaring willTransitionTo on the inner component. connect() will return a different component, which is the one the router will see. The fix is simple:

class App extends Component {
  render() {
    let { fname, lname } = this.props;

    return (
      <div>Hello {fname} {lname}!</div>
    );
  }

}

function select(state) {
  return state;
}

App = connect(select)(App)

// Put static on the outer component!

App.willTransitionTo = function () {
  console.log('willTransitionTo in App component');
};

See reduxjs/react-redux#53, acdlite/flummox#173 (comment) for more context.

[gaearon]

In the future please file this in https://github.com/rackt/react-redux.