Статически регенерировать информацию о состоянии на основе маршрута на основе текущего маршрута, используя класс Route из response-router-dom

Question

У меня есть цель генерировать информацию о состоянии, как если бы я перемещался по пути вручную, когда получал доступ к этому пути непосредственно из-за пределов «приложения».

Например: Базовый компонент Index использует состояние, чтобы определить, какой набор маршрутов следует учитывать:

render() {
    const $ = this;

    return (
        <SiteConfig.Provider value={$.store}>
            <BrowserRouter>
                <React.StrictMode>
                    <Route path="/:root" component={PathFinder}/>
                    {(() => {
                        if ($.state.mode === 'web') {
                            return (
                                <>
                                    <Header/>
                                    <Banner/>
                                    <Switch>
                                        <Route path="/" exact component={Web}/>
                                        .
                                        .
                                        .
                                    </Switch>
                                    <Footer/>
                                </>
                            );
                        } else if ($.state.mode === 'db'){
                            return (
                                <>
                                    <Header/>
                                    <Switch>
                                        <Route path="/db" exact component={DB}/>
                                        .
                                        .
                                        .
                                    </Switch>
                                </>
                            );
                        } else {
                            return (
                                <>
                                    <ErrorPage/>
                                </>
                            );
                        }
                    })()}
                </React.StrictMode>
            </BrowserRouter>
        </SiteConfig.Provider>
    );
}

Однако это не работает, так как рендеринг компонента Route, который создает компонент PathFinder для определения пути страницы, - выполняется после установки состояния по умолчанию для визуализации компонента Index.

Компонент Header в свою очередь генерирует свои ссылки на основе контекстной структуры данных типа store :

getNavLinks() {
    const $ = this;

    switch ($.context.get('mode')) {
        case 'database':
            return navLinksDB;

        default:
        case 'web':
            return navLinksWeb;
    }
}

Но Header также отвечает за режим состояния:

<Button variant={'outline-success'} as={NavLink} className="mr-2" activeClassName="active" to={'/db'} onClick={$.toggleSiteMode.bind($)}>Change&nbsp;View</Button>

, и он вызывает это

toggleSiteMode() {
    const $ = this;

    if ($.context.get('mode') === 'web')
        $.context.set('mode', 'database');
    else
        $.context.set('mode', 'web');
}

В этом магазине есть источник событий, который обновляет состояние на Index и так - это делается слишком поздно и пропускается при загрузке страницы.

Как я могу получить доступ к '~ / db' и регенерировать эта информация о состоянии?

Я не хочу использовать все больше и больше пакетов, я уже использую react-router-dom, а размер сайта составляет абсурд в окрестностях 400KiB составлено. Я также хочу избегать использования вложенных маршрутов, поскольку все, что нужно сделать, это скрыться от этой проблемы генерации информации о состоянии на основе текущего пути.