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

Question

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

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

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

我不知道 Spring 引导良好，但我想我可以检查服务器是否路由不匹配 /api，然后我会 return index.html 使用所有基于 HTTP 查询位置路径处理路由的反应逻辑？

我希望我清楚，我不想要 URL 中的散列并且路由必须在客户端上完成。

Answer 1

很旧，但通常您需要先匹配 api，然后使用通配符匹配其他所有内容和 return 索引...

这样任何深度链接仍然有效，通过服务于你的 React 应用程序的根，React 路由器将在浏览器持有的 URL 上获取。

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

Answer 2

我终于找到了如何捕获所有 GET 请求和 return 我的 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]

如果你需要更多的管理（比如server-side-render），你可以自己定义ErrorController。

所以当spring路由器什么都不匹配时，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";
    }
}

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

How to use React's BrowserRouter on client and Java REST API (Spring Boot) on the server?

javascript

java

reactjs

spring-boot

react-router-v4