HashRouter с BrowserRouter в сочетании

Question

пытается выяснить, как объединить эти два компонента.

        <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <HashRouter>
                    <Route path="/" component={Layout} />
                </HashRouter>
            </Route>
            <Route exact path="/vizualization">
                <HashRouter basename="/vizualization">
                    <Route path="/" component={VizualizationLayout} />
                </HashRouter>
            </Route>
            <Route exact path="/terminal">
                <HashRouter basename="/terminal">
                    <Route path="/" component={TerminalLayout} />
                </HashRouter>
            </Route>
        </Switch>
    </BrowserRouter>

Мое приложение разделено на три подприложения, их URL должны быть

http://localhost/

http://localhost/vizualization/

http://localhost/terminal

а также я хочу использовать HashRouter для таких URL, как

http://localhost/vizualization/#/.../...

К сожалению, если я ввожу любой другой URL из первого, он всегда перенаправляет меня на первый компонент, называемый «Макет».

Я попробовал несколько комбинаций basename и switch, но без удачи. Я был бы счастлив, если бы кто-нибудь помог мне разобраться. Спасибо!

РЕДАКТИРОВАТЬ: также проверил это

    <Provider coreStore={store}>
    <div>
        <HashRouter basename="/">
            <Route path="/" component={Layout} />
        </HashRouter>

        <HashRouter basename="/vizualization">
            <Route path="/" component={VizualizationLayout} />
        </HashRouter>

        <HashRouter basename="/terminal">
            <Route path="/" component={TerminalLayout} />
        </HashRouter>
    </div>
</Provider>

Но он показывает все компоненты.

Answer 1

Не используйте basename="...", так как маршрутизаторы отделены друг от друга.

https://codesandbox.io/s/suspicious-feather-09ijf