Блог

Главная - Вопросы по программированию - Возможно ли иметь несколько браузеров в приложении react

Возможно ли иметь несколько браузеров в приложении react

#javascript #reactjs #react-router-dom

Вопрос:

У меня есть сценарий, я хочу иметь 2 разных интерфейса в существующем приложении react. У V1 (версии 1) будет другой пользовательский интерфейс, а у V2 (версии 2) будет другой пользовательский интерфейс.

Существующая реализация выглядит следующим образом,

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

Возможно ли иметь несколько браузеров параллельно?

Комментарии:

1. Взгляните на вложенную маршрутизацию reactrouter.com/web/guides/quick-start/…

2. @Drew Я пытался, но я получаю ошибку.

3. Пожалуйста, покажите нам, что вы пробовали, и, поскольку вы говорите, что произошла ошибка, пожалуйста, также включите это в свой вопрос, это своего рода важная деталь/информация.

Ответ №1:

Вы не можете использовать несколько маршрутизаторов, но вместо этого вы можете использовать вложенные маршрутизаторы. См.: https://reactrouter.com/web/example/nesting

Комментарии:

1. Я говорю о нескольких браузерах-маршрутизаторах параллельно. Не вложенный маршрут.

2. Нет. Это невозможно. У вас может быть только один браузер. Остальное вложите внутрь.

3. Создайте основной маршрутизатор браузера, а затем вложите версии внутрь.

4. Это просто откровенная ложь. Router это просто компонент React, предоставляющий контекст маршрутизации, вы можете отображать их несколько. Возникает проблема, когда вы начинаете вкладывать маршрутизаторы в маршрутизаторы, или, скорее, это контексты маршрутизации в других контекстах маршрутизации. Контексты «внешних» маршрутизаторов не знают о том, что обработали вложенные «внутренние» маршрутизаторы.

Ответ №2:

Вам не нужно использовать их параллельно:

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

Метки: