Ошибка белой метки при обновлении страницы в ответном SPA, работающем в весеннем облачном шлюзе

Я работаю над полнофункциональным приложением с весенней загрузкой. Я использовал Spring Cloud Gateway в качестве шлюза API для маршрутизации запросов к вышестоящим микросервисам. Кроме того, мой реагирующий SPA также работает на облачном шлюзе spring.

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

Когда я перемещаюсь по графическому интерфейсу, он работает нормально

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

Мне придется снова загрузить целевую страницу и перемещаться только через графический интерфейс.

Я попытался настроить приложение шлюза, как показано ниже, но оно не работает.

@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){
    return factory -> {
      ErrorPage errorPage = new ErrorPage(HttpStatus.NOT_FOUND,"/index.html");
      factory.addErrorPages(errorPage);
    };
}


package com.xpense.service;

import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistrar;
import org.springframework.boot.web.server.ErrorPageRegistry;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;

@Component
public class ErrorPageConfig implements ErrorPageRegistrar {
@Override
public void registerErrorPages(ErrorPageRegistry registry) {
    registry.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND,"/index.html"));
}
}

ниже конфигурация маршрутизации

server:
port: 10443
spring:
 application:
   name: xpense-api-gateway
cloud:
  gateway:
    routes:
    - id: xpense-service
      uri: http://localhost:18080/
      predicates:
        - Path=/xpense/service/**

пожалуйста помоги

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку вы используете маршрутизацию на стороне клиента, вместо использования маршрутизатора браузера используйте хеш-маршрутизатор. Дополнительную информацию можно найти в В чем разница между HashRouter и BrowserRouter в React?

Другие вопросы по теме