reactjs - HashRouter with BrowserRouter combined

Question

trying to figure out, how to combine these two components.

        <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>

My application is divided into three subapplications, their urls should be

http://localhost/

http://localhost/vizualization/

http://localhost/terminal

and also I want to use HashRouter on these urls like

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

Unfortunately, if I enter any other URL from the first one, it always redirects me to the first component called "Layout".

I have tried some combinations of basename and switches, but without luck. I would be happy if someone can help me to figure it out. Thanks!

EDIT: Also tested this

    <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>

But it shows all components.

标签： reactjsreact-router

Answer 1

Don't use basename="..." thoses router are seperate from each other.

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