Component attempts to render before asyncConnect promise is fired/resolved

[simonurmi]

I'm exporting my component as follows:

export default asyncConnect([{ promise: loadAsyncProps }])(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(MyComponent),
);

And using it in router config like this:

[
  {
    path: '/',
    component: Root,
    routes: [
      {
        path: '/',
        exact: true,
        component: Home,
      },
      {
        path: '/my-route',
        exact: true,
        component: MyAsyncConnectedComponent,
      },
  },
];

Home component doesn't use asyncConnect. It works fine. MyComponent works only when clicking to /my-route through a link in Home.

When entering /my-route in any other way (address bar, hot reload etc.), the inner component, in this case the react-redux connected MyComponent, is rendered without the promise even firing.

MyComponent uses data fetched with asyncConnect, and the component crashes because props are null.

I'm not using SSR.

Library versions:

redux-connect: 9.0.0
react-redux: 7.0.0
react-router: 5.0.0
react: 16.8.6
redux: 4.0.1