Is it possible to have multiple BrowserRouter in react app

Question

I have a scenario, I want to have 2 different UI in the existing react app. V1 (versions1) will have a different UI and V2 (versions2) will have a different UI.

Existing implementation is like below,

   <BrowserRouter basename=“/us”>
     <Version1Layout>
        <Switch>
            <Route exact={true} path=“/” component={Home} />
            <Route exact={true} path=“/about” component={About} />
        </Switch>
      </Version1Layout> 
    </BrowserRouter >

But I want something like this:-

<div>
 <BrowserRouter basename=“/us/v1”>
   <Version1Layout> 
    <Switch>
        <Route exact={true} path=“/” component={Home} />
        <Route exact={true} path=“/about” component={About} />
    </Switch>
   </Version1Layout> 
 </BrowserRouter>
 <BrowserRouter basename=“/us/v2”>
   <Version2Layout>
    <Switch>
        <Route exact={true} path=“/report1” component={ReportView1} />
        <Route exact={true} path=“/report2” component={ReportView2} />
    </Switch>
   </Version2Layout>
 </BrowserRouter>
</div>

Is it possible to have multiple BrowserRouter in parallel?

Answer 1

You don't need to use them in parallel:

<div>
 <BrowserRouter basename=“/us”>
  <Switch>
    <Version1Layout path={'/v1'}>
       <Switch>
        <Route exact={true} path=“/” component={Home} />
        <Route exact={true} path=“/about” component={About} />
       </Switch>
    </Version1Layout>
    <Version2Layout path={'/v2'}>
       <Switch>
        <Route exact={true} path=“/report1” component={ReportView1} />
        <Route exact={true} path=“/report2” component={ReportView2} />
       </Switch>
    </Version2Layout>
    <Redirect to={'/v1'}/>
  </Switch>
 </BrowserRouter>
</div>

The neat thing about Switch is it just renders the first component that has a matching path prop - you don't even need to use Route's.