Nano Hash - криптовалюты, майнинг, программирование

Рендеринг ассетов после монтирования компонентов для рендеринга React (response-router)

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

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

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

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

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

history.push('/home')

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

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

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

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

reactjs javascript react-redux react-router
05.06.2018

Ответы:


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

мой код с идентификацией и анализом «примера», а затем передать его моему методу действия this.props.ssauthentication, который запускает вызов api аутентификации в моем файле actions_index.js.

* примечание: я также передаю this.props.history из response-router, чтобы разрешить перенаправление страницы и домашний компонент для монтирования после завершения вызовов api.

13.06.2018
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..