时间戳

首页 > 解决方案 > 反应应用程序中是否可以有多个 BrowserRouter

javascript - 反应应用程序中是否可以有多个 BrowserRouter

问题描述

我有一个场景，我想在现有的 react 应用程序中有 2 个不同的 UI。V1 (versions1) 将具有不同的 UI，V2 (versions2) 将具有不同的 UI。

现有的实现如下所示，

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

但我想要这样的东西： -

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

是否可以有多个 BrowserRouter 并行？

标签： javascriptreactjsreact-router-dom

解决方案

您不需要并行使用它们：

<div>
 <BrowserRouter basename=“/us”&gt;
  <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's.

推荐阅读