Multiple Routers break routing

[gyuhyeon]

Version

5.0.0

Test Case

https://codesandbox.io/s/3v04q4prrq

Steps to reproduce

Have multiple Routers defined in order to utilize basenames. There are cases when this is required especially in enterprise level setups, where multiple different servers reverse proxy onto a single frontend react dedicated server with different unique routes as : /finance/mobile/web, /order/mobile/web, /point/web. It's not exactly fun to append all those routes on to the routing config if there are 400+ unique urls.

Expected Behavior

<Router basename="/foo">
    <div>
    <Switch>
        <Route exact path="/about" component={About} />
    </Switch>
    </div>
</Router>
<Router basename="/bar">
    <div>
    <Switch>
        <Route exact path="/about" component={About} />
        <Route component={NotFound} />
    </Switch>
    </div>
</Router>

• navigating to /foo/about should render a single About component only.
• navigating to /foo/asdf/ shouldn't render anything(0 components).
• navigating to /bar/about should render a single About component only.
• navigating to /bar/asdf should render a single NotFound component only.

Actual Behavior

• navigating to /foo/about renders the About component and also other components randomly(/bar/about, /bar/notfound) along with it below.
• navigating to /foo/asdf also seemingly renders other components randomly.
• navigating to /bar/about renders a single About component only as expected.
• navigating to /bar/asdf renders a single NotFound component only as expected.

Last words

• if react-router-dom doesn't support multiple routers, I strongly suggest reconsidering a new implementation. Most(if not all) sane routing schemes support this. From WAS such as Node.js express or Spring MVC to WS like Nginx or Apache, the following configuration should be supported no matter what.

  #sample nginx config
  location /foo/redirect/to/other/department/project {
  ...
  }
  location /bar/redirect/to/yet/another/department/project/ {
  ...
  }
  location / {
  ... # catch other unmatched locations
  }

Thank you.

[timdorr]

The basename prop is meant to emulate the <base> tag, of which, there can only be one on a page at a time.

What you're looking for here is a top level BrowserRouter to drive the interaction with the DOM history, and many MemoryRouters underneath that to handle several sections of your application.