React Router - Mobile First: не отключать текущий компонент, пока новый не будет готов?

Question

TL; DR: При переходе на страницы с response-router v4 , как сохранить текущий компонент, пока новый компонент не будет готов, то есть он сделал свои вызовы ajax и получил необходимые данные дляdisplay?

В настоящее время act-router v4 работает следующим образом:

1. Пользователь нажимает ссылку
2. Изменения маршрута
3. Размонтироватьтекущий компонент и монтирование нового соответствующего компонента
4. Ajax-вызовы для заполнения данных компонентов

Однако если мы подумаем о mobile-first подход , рабочий процесс должен быть:

1. Пользователь нажимает ссылку
2. соответствующий компонент монтируется, скрывается, инициализируется с помощью вызовов ajax в componentDidMount / updated
3. инициализация выполнена, компонент и его данныеготов
4. Изменить URL, размонтировать старый компонент и отобразить новый.

Изменение URL может быть после того, как пользователь щелкнет ссылку или после того, как новый компонент будет готов.

Используя redux мы можем достичь этого следующим образом:

1. Сделать все компоненты состоящими, иметь действия componentXLoad () для каждого
2. Вместо изменения маршрута запустите эти действия, а внутри действий изменитеurl после выборки данных компонента

Тем не менее, я считаю, что нам не нужно идти до конца и делать каждый компонент с состоянием и генерировать множество действий для каждого перехода страницы.

Идея у меня была:

1. Пользователь нажимает ссылку
2. Маршрут изменяется, новый компонент инициализируется
3. Если рендеринг нового компонента ()Метод возвращает ноль, не размонтируйте текущий компонент
4. Когда новый компонент будет готов, рендеринг не равен нулю, размонтируйте старый компонент и отобразите новый.

Я считаю, что этотеоретически возможно.

Уже есть библиотека, которая делает это?Или это что-то легко сделать с помощью API React Router v4?

Кроме того: Как это повлияет на SEO, есть ли у Google шанс скрыть наказание за сайт?

У меня естьнашел эту библиотеку https://github.com/faceyspacey/redux-first-router, кажется, что она может сделать это, сделав все с состоянием, но опять же для чего-то такого простого кажется излишним, чтобы переключиться на это.

Спасибо

Answer 1

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

1. Из компонента Получить данные, которые вам нужно получить (возможно, покажет какой-нибудь индикатор при получении)
2. Переход к компоненту B с передачей данных в виде пользовательских реквизитов
3. Компонент B изначально визуализируется с данными