Остановить React Router DOM <Route>от запуска визуализации компонентов при изменении ориентации устройства

Question

В качестве предисловия ко всему, я пытаюсь оптимизировать свое приложение для мобильных устройств с помощью встроенного в Chrome эмулятора точки останова устройства.Мне хорошо известно, что это не инструмент, который идеально имитирует среду мобильного устройства (iOS / Android).Все это говорит о том, что я в настоящее время не знаю, связана ли эта проблема, которую я собираюсь описать, с природой инструмента, который не ведет себя как эти вещи, или действительно ли это что-то не так с кодом, который я написал для моегоapp.

При этом у меня в компоненте App верхнего уровня есть следующая настройка:

<Route path='/' component={(props) => {
  return session.userIsAuthenticated ? (
    <AuthenticatedMobileMenu {...this.props} />
  ) : (
    <MobileMenu {...this.props} />
  )
}}/>

По какой-то причине, которую я не могу объяснить, компонент <Route>Логика рендеринга всегда срабатывает, когда я делаю следующее ...

Учитывая, что я начинаю с книжной ориентации на моем "эмулируемом" устройстве в Chrome.

1. Поворот из портретав Пейзаж
2. Поворот из Пейзажа обратно в Портрет (всегда вызывает запуск функции компонента <Route>)

Этот повторный запуск функции компонента вызывает нежелательную потерю состояния, так каквсегда возвращает новый компонент меню в качестве конечного результата.Я не могу понять, почему происходит повторный запуск при изменении ориентации эмулируемых устройств, и я надеюсь, что кто-то еще знает.

Еще несколько вещей, которыми можно поделиться.

1. Мой компонент App верхнего уровня находится в состоянии (не в состоянии), и я не слушаю никаких событий, связанных с ориентацией, в моем Reactприложение, которое вызывает изменение состояния уровня приложения.
2. Почему компонент рендеринга компонента при первой ориентации не изменяется с книжной на альбомную, если он всегда срабатывает при смене с альбомной / книжной ориентации?

И просто, чтобы повторить начальную точку - я не знаю, делаю ли я что-то не так в коде или инструмент Chrome содержит ошибки и вызывает такое поведение, которое, возможно, никогда не произойдет на реальном, физическомустройство. '

Обновление 1

Я не включил в приведенный выше фрагмент важную информацию, которая явилась основной причиной проблемы ориентации.Мой компонент <Route> обернут внутри компонента React Responsive <Tablet>.Он определен как:

// @flow
import React from 'react'
import Responsive from 'react-responsive'

import {ViewBreakpoint} from '../constants/ViewBreakpoint'

type Props = {
  maxWidth?: boolean,
  rest: any
}

export const Tablet = ({maxWidth, ...rest}: Props) => (
  maxWidth ? (
    <Responsive {...rest} maxWidth={ViewBreakpoint.MAX_WIDTH_TABLET} />
  ) : (
    <Responsive {...rest} minWidth={ViewBreakpoint.MIN_WIDTH_TABLET} />
  )
)

Так что мой фрагмент на самом деле выглядит следующим образом:

<Tablet maxWidth>
  <Route path='/' component={(props) => {
    return session.userIsAuthenticated ? (
      <AuthenticatedMobileMenu {...this.props} />
    ) : (
      <MobileMenu {...this.props} />
    )
  }}/>
</Tablet>

Я подтвердил, что это была проблема, удалив компонент обтекания <Tablet> вокруг <Route> ифункция компонента больше не срабатывает при вращении.

Тем не менее, мне нужно поддерживать это поведение, потому что это мобильное меню должно появляться только для телефонов и планшетов.Я не хочу, чтобы это было в моем дереве DOM для рабочего стола.