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

Posted 2023-02-26

【中文标题】如何在客户端使用 React 的 BrowserRouter 并在服务器上使用 Java REST API (Spring Boot)？

【英文标题】：How to use React's BrowserRouter on client and Java REST API (Spring Boot) on the server?

【发布时间】：2017-09-30 18:23:44

【问题描述】：

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

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

但是（如何）我可以在客户端上使用 BrowserRouter 的 react-router-dom (Router v4) 而不是 HashRouter？

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

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

【参考方案1】：

相当老了，但通常你只需要先匹配 api，然后有一个通配符来匹配其他所有内容并返回索引......

通过这种方式，任何深度链接仍然可以工作，通过提供你的 react 应用程序的根目录，react 路由器将在浏览器保存的 URL 上获取。

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

【讨论】：

谢谢，这是我试图做的，但直到现在才找到如何编码（检查接受的答案）。

【参考方案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

【讨论】：

contextPath 变量从何而来？

@ChristianDesserich 我添加了引用 contextPath 的缺失代码。

【参考方案3】：

通配符*已绑定ResourceHttpRequestHandler，最好保留：

Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]

如果您需要更多管理（例如服务器端渲染），您可以定义自己的ErrorController。

所以当 spring 路由器不匹配时，spring 可以响应你的 react s-s-r 结果：

@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 s-s-rHtmlContent;
        
        return "Error handling";