Franco Risso
Franco Risso

Reputation: 1582

Redux-router: Link not triggering re-render, but history.change is

I'm looking to make this piece of code work and didn't get it through the docs or the example in the source code in the redux-router project. I've this code (started with root in /frontend for migration reasons):

class App extends Component {
  render() {
    const links = [
      '/frontend',
      '/frontend/season',
      '/frontend/episode'
    ].map(l =>
      <p>
        <Link to={l}>{l}</Link>
      </p>
    );
    console.log('render');
    return (
      <div>
        <h1>App Container</h1>
        {links}
        {this.props.children}
      </div>
    );
  }
}
App.propTypes = {
  children: PropTypes.node
};
function mapStateToProps(state) {
  return {
    routerState: state.router
  };
}
connect(mapStateToProps)(App);

const rootReducer = combineReducers({
  episode,
  router: routerStateReducer
});

const store = compose(
  reduxReactRouter({ createHistory})
)(createStore)(rootReducer,initialState);

class Root extends Component {
  render() {
    return (
      <div>
        <ReduxRouter history={history}>
          <Route path="/frontend" component={App}>
            <Route name="episode" path="episode" component={EpisodeApp} />
            <Route name="season" path="season" component={SeasonApp} />
          </Route>
        </ReduxRouter>
      </div>
    );
  }
}

React.render(
  <Provider store={store}>
    {() => <Root/>}
  </Provider>
  , document.getElementById('root'));

The thing is that when I press the links nothing changes and the App doesn't re-renders its children, but when I go back and forth using the browser navigation it does work. Where am I screwing this up?

Thanks a lot!

Upvotes: 0

Views: 825

Answers (1)

Franco Risso
Franco Risso

Reputation: 1582

Update:

Replace this line:

<ReduxRouter history={history}>

by this one (so removing history object):

<ReduxRouter>

Make it work, not sure why.

Upvotes: 1

Related Questions