Рендеринг активов после монтирования компонентов для рендеринга React (реагирующий маршрутизатор)

Question

Я использую React, React-Router и Redux в своем приложении.Моя проблема заключается в том, что, когда мой маршрут вызывает перенаправление с моей целевой страницы для единого входа в домашний компонент после проверки подлинности, компонент визуализируется до загрузки ресурсов (с корневой HTML-страницы).После обновления страницы ресурсы загружаются и CSS отображается правильно.Я в замешательстве, потому что с реагировать это SPA, и я бы подумал, что активы будут загружены с рендеринга целевой страницы.

Я попробовал следующее:

• Добавление setTimeout до запуска вызова API для аутентификации на моей целевой странице с единым выходом
• Попытка загрузкииндикатор рендерится до полного монтирования компонента (используя состояние компонента для контроля того, какой контент просматривается.
• Я также попытался добавить setTimeout при переключении представлений в домашнем компоненте, чтобы замедлить переключение с загрузкипросмотр основного содержимого.

Маршрутизация и аутентификация работают правильно. Только после загрузки компонента ресурсы из html загружаются.

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

history.push('/home')

Для объясненияпроцесс: после завершения аутентификации создатель действия подталкивает кдомашняя страница, которая монтирует компонент.Содержимое компонента монтируется нормально, но рендерится до загрузки активов, что является неприятной проблемой.Я не уверен, почему это происходит только с одним знаком перенаправления, а не с двумя другими процессами проверки.

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

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

ОБНОВЛЕНИЕ: Я вошел в инструменты разработчика Chrome и убедился, что теги скрипта загружены.Так что в основном он не обрабатывает CSS до обновления ...

Answer 1

Так что моя проблема была в том, как браузер искал файлы ресурсов относительно моих URL.Поскольку я добавил / ss /: id в корневой URL-адрес, браузер пытался найти ресурсы с помощью / ss /: id, добавленного к базовому URL-адресу.Это привело к тому, что они не были найдены и страница загружалась без ресурсов.При обновлении страницы URL-адрес вернулся к корневому URL-адресу, и активы смогли быть идентифицированы.

Я решил исправить это, используя опцию this.props.location.search с response-router вместе с пакетом npm 'qs', который позволил мне разобрать строку и выбрать идентификатор из URL-адреса.,

, поэтому мой маршрут реакции на странице index.js выглядит следующим образом:

<Route path="/ss" component={SSAuth} />

и в моем файле SSAuth (единый вход):

 componentDidMount(match) {
 const value = qs.parse(this.props.location.search, {ignoreQueryPrefix : true})
 console.log(value)
 this.props.ssauthentication(value.id, this.props.history)


}

У меня былдобавить необязательный параметр {ignoreQueryPrefix: true}, чтобы поисковый запрос '?'будет проигнорировано.

, поэтому URL-адрес перенаправления будет выглядеть примерно так:

https://baseurl.com/ss?id=example

мой код с идентификатором и разбором 'example', а затем передайте его моему методу действия 'this.props.ssauthentication ', которая запускает вызов API аутентификации в моем файле actions_index.js.

* примечание: я передаю this.props.history из реагирующего маршрутизатора, чтобы позволить перенаправлению страницы и домашнему компоненту монтироваться после завершения вызовов API.