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

IT技术 javascript java reactjs spring-boot react-router-v4
2021-05-22 17:42:18

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

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

但是(如何)我可以在客户端上使用BrowserRouterof react-router-dom(Router v4) 而不是HashRouter?

我不太了解 Spring Boot,但我想我可以在服务器上检查路由是否匹配/api,然后我会index.html根据 HTTP 查询位置路径返回处理路由的所有react逻辑?

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

3个回答

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

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

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

我终于找到了如何捕获所有 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

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