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>

我的应用程序分为三个子应用程序，其网址应为

http://localhost/

http://localhost/vizualization/

http://localhost/terminal

我也想在这些网址上使用HashRouter，例如

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

不幸的是，如果我从第一个URL输入任何其他URL，它总是将我重定向到第一个名为“布局”的组件。

我尝试了一些基名和开关的组合，但是没有运气。如果有人可以帮助我解决问题，我将非常高兴。谢谢！

编辑：也对此进行了测试

    <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

结合了BrowserRouter的HashRouter

1 个答案: