Как настроить вложенные маршруты с помощьюact-router для загрузки вложенных контекстов, используя ReactJs?

Question

Мне нужно реализовать механизм вложенной маршрутизации, используя react-router, синхронизированный с загрузкой контекста в React.

Идея состоит в том, чтобы загружать модули, и для каждого модуля загружать страницы на нем.

При загрузке приложения (App) мне нужно загрузить appContext.

При каждом изменении модуля мне нужно перезагрузить moduleContext, но БЕЗ ПЕРЕЗАГРУЗКИ снова appContext.

Короткими шагами:

1. Загрузка appContext при загрузке приложения

2. Загрузка moduleContext при загрузке модуля по умолчанию

3. Другая страница из того же модуль ==> ничего не загружает, так как имеет оба допустимых контекста

4. Другая страница из другого модуля ==> загружает только moduleContext, так как appContext остается действительным

Вот мои компоненты:

class App extends Component {
    render = () => {
        let routes = null;
        if (!isAuthenticated()) {
            routes = <Auth />;
        } else {
            routes = (
                <Switch>
                    <Route exact path="/logout" render={() => logout()} />
                    <Route exact path="/auth" render={() => logout()} />

                    <Route component={AppLoader} />
                </Switch>
            );
        }

        return <BrowserRouter>{routes}</BrowserRouter>;
    };
}

class AppLoader extends Component {
    render = () => {
        return (
            <AppContextLoader>
                <ModulesLoader {...this.props} />
            </AppContextLoader>
        );
    };
}

class ModulesLoader extends Component {
    render = () => {
        let { location } = this.props;

        return (
                <Switch>
                    <Route
                        path="/module1"
                        render={props => <Module module="module1" />}
                    />
                    <Route
                        path="/module2"
                        render={props => <Module module="module2" />}
                    />
                </Switch>
        );
    };
}

class Module extends Component {
    static propTypes = {
        module: PropTypes.string.isRequired
    };

    render = () => {
        let { module } = this.props;

        return (
            <ModuleContextLoader module={module}>
                <h1>Load Page Here</h1>
            </ModuleContextLoader>
        );
    };
}

Моя проблема в том, что при каждом изменении страницы я перезагружаю appContext и moduleContext, и это не ожидаемое поведение.

Как правильно вложить роутер для достижения желаемых результатов?