React应用程序中是否可以有多个BrowserRouter

Question

我有一个场景，我想在现有的 React 应用程序中有 2 个不同的 UI。 V1（版本 1）将具有不同的 UI，V2（版本 2）将具有不同的 UI。

现有的实现如下，

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

但我想要这样的东西：-

<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>

是否可以并行多个BrowserRouter？

Answer 1

您不需要并行使用它们：

<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>

关于

Switch

的巧妙之处在于它只渲染具有匹配

path

道具的第一个组件 - 您甚至不需要使用

Route

的。

Answer 2

您不能使用多个路由器，但可以使用嵌套路由器。 请参阅：https://reactrouter.com/web/example/nesting