Reputation: 1692
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/vizualization/
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.
Upvotes: 2
Views: 5931
Reputation: 11
<Switch>
is no longer compatible in v6. Is there an alternative to stack HashRouter and Routes within BrowserRouter?
ps. I will update if I manage to integrate the newest version.
Upvotes: 0
Reputation: 599
Don't use basename="..."
thoses router are seperate from each other.
https://codesandbox.io/s/suspicious-feather-09ijf
Upvotes: 3