connected-react-router app updates url but not components

Question

I've double checked all the tutorials and FAQs but I can't seem to figure out where my problem lies.

Full example here: https://stackblitz.com/edit/react-hmuwhx?embed=1&file=App.js

Some code of interest below. Help appreciated!

export const createRootReducer = history =>
  combineReducers({
    router: connectRouter(history),
    ui: uiReducer,
    user: userReducer
  });

const middlewares = [ReduxThunk];

export const history = createBrowserHistory();

export const store = createStore(
  createRootReducer(history),
  compose(applyMiddleware(...middlewares, routerMiddleware(history)))
);

<Provider store={store}>
  <App history={history} />
</Provider>

export class App extends React.Component {
  render() {
      return (
      <ConnectedRouter history={this.props.history}>
          <div className="full-height">
          <InitializingContainer>
              History length: {this.props.history.length}
              <Switch>
              <Route exact={true} path="/" component={HomePage} />
              <Route path="/test" render={() => <div>Test</div>}/>
              </Switch>
          </InitializingContainer>
          </div>
      </ConnectedRouter>
      );
  }
}

export class HomePage extends React.Component {
  render() {
    return (
      <ul>
        <li>You are here: {this.props.match.path}</li>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/test">Test</Link>
        </li>
      </ul>
    );
  }
}

Of note, it works when I hard refresh with the URL but not when navigating via <Link> — ryan
– ryan, Commented Dec 12, 2018 at 15:18

Shubham Khatri · Accepted Answer · 2018-12-13 06:09:41Z

2

The problem is that your InitializingContainer is not receiving the Router props and hence not listening to the route history context changes.

Making use of withRouter with connect like

export const InitializingContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Initializing));

solves the problem.

answered Dec 13, 2018 at 6:09

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

connected-react-router app updates url but not components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related