Как использовать 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";
    }
}