如何在客户端使用 React 的 BrowserRouter，在服务器上使用 Java REST API (Spring Boot)？

Question

我想在客户端上使用 React，在服务器上使用 Java Spring Boot 来获取 REST API，客户端和服务器都打包在一起，因此它们托管在同一个应用程序服务器上。

我已经可以通过/api路径查询服务器 API。

但是，（如何）我可以使用BrowserRouter的react-router-dom客户端，而不是在（路由器V4） HashRouter ？

我不太了解 Spring Boot，但我想我可以检查服务器是否路由不匹配/api ，然后我将返回index.html以及所有基于 HTTP 查询位置路径处理路由的反应逻辑？

我希望我很清楚，我不希望 URL 中的哈希值和路由必须在客户端上完成。

Answer 1

很旧，但一般来说，您只需要先匹配 api，然后使用通配符来匹配其他所有内容并返回索引...

通过这种方式，任何深层链接仍然可以工作，通过为您的 React 应用程序的根提供服务，其中 react 路由器将在浏览器保存的 URL 上获取。

Spring 应该处理像@RequestMapping(value = "/")这样简单的事情，将所有内容路由到索引。 我希望如果您指定 /api/ 它会更具体并优先。

Answer 2

我终于找到了如何捕获所有 GET 请求并返回我的 React 应用程序，这非常简单，只需使用通配符* ，请注意/*将不起作用。

@Value("${server.servlet.context-path}")
private String contextPath;

@GetMapping("*")
public ModelAndView defaultPage(Map<String, Object> model) {
    model.put("contextPath", contextPath);
    return new ModelAndView("index", model);
}

在这个例子中，索引指向这个文件/src/main/resources/static/index.html

Answer 3

通配符*已绑定到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";
    }
}