Как остановить перемонтирование и избежать необходимости поднимать состояние с помощью React Router 5 и <Switch>?

Question

Поведение по умолчанию для React Router 5 заключается в перемонтировании компонентов при каждом выборе. Я поднимал (маршрутизировал) состояние компонента в маршрутизатор и передавал его в качестве реквизита. Это не может быть правдой. Есть ли правильный способ сохранить компонент смонтированным, чтобы я мог посещать другие маршруты на том же уровне и сохранять состояние ранее смонтированных компонентов?

        <Switch location={location}>
          <Route exact path="/">
            ...          
          </Route>
          <Route path="/another">
            ...
          </Route>
        </Switch>

Единственная альтернатива, о которой я могу думать, это вкладки, Я держу все элементы смонтированными и использую видимость, чтобы показать / скрыть смонтированные объекты.

Спасибо

Answer 1

Я нашел ответ в документации React Router ... https://reacttraining.com/react-router/core/api/Route/children-func

Короткий ответ: я использовал опору для детей и условное имя класса на основе {match}, чтобы показать или скрыть компонент - без закрывающего переключателя (так как это вызывает повторную визуализацию).

      <Route exact path="/" component={Home} />
      <Route exact path="/about" key="about" children={({match})=>
        <div className={match ? "show" : "hide"}>
          <About/>
        </div>}
      />     
      <Route path="/topics" component={Topics} />

Решение здесь: https://codesandbox.io/s/react-routing-without-remount-tenln?file= / style. css