How to use library with code splitting with React.lazy and use declarative routing?

Say with have several modules, one for each page. Each of them is pretty heavy, and its not an option to load them all in advance to prepare static routes map as demonstrated in example (`const routes = [{ path: '/foo', component: Page1 },...];`)

Each module contains async-connected page component + appropriate reducer.

first create lazy wrappers for each page:
```js
const Page1 = lazy(async () => {
const moduleBundle = await import(/* webpackChunkName: "Page1" */'src/pages/Page1');
injectAsyncReducer(store, moduleBundle.constants.NAME, moduleBundle.reducer);
return moduleBundle;
});
const Page2 = lazy(async () => {
const moduleBundle = await import(/* webpackChunkName: "Page2" */'src/pages/Page3');
injectAsyncReducer(store, moduleBundle.constants.NAME, moduleBundle.reducer);
return moduleBundle;
});
```
`injectAsyncReducer` function re-configures store and injects reducer for certain page using replaceReducer redux utility.

now init provider, router, suspense-wrapper, define routes and mount tree:
```js
ReactDOM.render(




Loading...}>












,
renderTarget,
);
```

so the question, where is the place for `` component here?

Start by comparing the existing example referenced in the issue with the React.lazy and Route tree, then locate the ReduxAsyncConnect usage. Done would be documented, verified guidance for integrating ReduxAsyncConnect with lazy-loaded pages, async reducers, and declarative routing.

Written by the indexing model from the issue text.