Как использовать BrowserRouter React на клиенте и Java REST API (Spring Boot) на сервере?
Я хочу использовать React на клиенте и Java Spring Boot на сервере для REST API, как клиент, так и сервер упакованы вместе, поэтому они размещаются на одном сервере приложений.
Я уже могу запросить API сервера через /api
путь.
но (как) я могу использовать BrowserRouter
of react-router-dom
(маршрутизатор v4) на клиенте вместо HashRouter
?
Я не знаю Spring Boot хорошо, но я думаю, что я мог бы проверить на сервере, если маршрут не соответствует /api
, тогда я бы вернул index.html
со всей логикой react, обрабатывающей маршрут на основе пути расположения HTTP-запроса?
Я надеюсь, что я ясно, я не хочу, чтобы хэш в URL и маршрутизация должна быть выполнена на клиенте.
3 ответов
довольно старый, но в целом все, что вам нужно, это сначала сопоставить api, а затем иметь подстановочный знак, чтобы соответствовать всему остальному и возвращать индекс...
таким образом, любая глубокая связь все равно будет работать, обслуживая корень вашего приложения react, где react router подберет URL-адрес браузера.
Spring должен обрабатывать что-то простое, как @RequestMapping(value = "/")
Как маршрутизация все проиндексировать. Я ожидал бы, если вы укажете / api/ это будет более конкретным и принять старшинство.
Я, наконец, нашел, как поймать все запросы GET и вернуть мое приложение React, это было смертельно просто, просто используйте wild card *
отметим, что /*
не будет работать.
@GetMapping("*")
public ModelAndView defaultPage(Map<String, Object> model) {
model.put("contextPath", contextPath);
return new ModelAndView("index", model);
}
в этом примере указатель указывает на этот файл /src/main/resources/static/index.html
подстановочные *
был назначен ResourceHttpRequestHandler
, лучше держать его:
Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
Если вам нужно больше управления (например, на стороне сервера), вы можете определить себя ErrorController
.
поэтому, когда spring router ничего не соответствует, spring может ответить на ваш результат react ssr:
@Controller
public class ServerSideRenderrer implements ErrorController {
@Override
public String getErrorPath() {
return "/error";
}
@RequestMapping(value = "/error")
@ResponseBody
public String error(HttpServletRequest request, HttpServletResponse response) {
Integer statusCode = (Integer) request.getAttribute("javax.servlet.error.status_code");
String original = request.getAttribute(RequestDispatcher.FORWARD_REQUEST_URI);
String method = request.getMethod();
if (statusCode == 404 && method.equalsIgnoreCase("GET") && original.contains("xxx")) {
response.setStatus(200);
return ssrHtmlContent;
}
return "Error handling";
}
}