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=“/” ponent={Home} />
            <Route exact={true} path=“/about” ponent={About} />
        </Switch>
      </Version1Layout> 
    </BrowserRouter >

But I want something like this:-

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

Is it possible to have multiple BrowserRouter in parallel?

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=“/” ponent={Home} />
            <Route exact={true} path=“/about” ponent={About} />
        </Switch>
      </Version1Layout> 
    </BrowserRouter >

But I want something like this:-

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

Is it possible to have multiple BrowserRouter in parallel?

• javascript
• reactjs
• react-router-dom

• Have a look at nested routing reactrouter./web/guides/quick-start/… – BrendanMullins Commented Apr 20, 2021 at 8:22
• @Drew I tried, But I am getting an error. – Raj Rj Commented Apr 20, 2021 at 9:24
• Please do show us what you've tried, and since you say there is an error please also include that as part of your question, it's kind of an important detail/information. – Drew Reese Commented Apr 20, 2021 at 15:40

2 Answers 2

You don't need to use them in parallel:

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

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

You can not use multiple routers but instead you can use nested routers. See: https://reactrouter./web/example/nesting