javascript - 让一些路由由 Groovy 处理，另一些由 React-router v4 处理

Question

我正在使用的代码在后端 Groovy 代码中具有呈现 GSP(Groovy 服务器页面)的 Controller 。对于前端，我们使用 React-router v4 来处理路由。我遇到的问题是，通过在react-router中定义路由，它不允许浏览器从后端获取任何内容，并且不会渲染组件(因为模板是在该路由的后端定义的)而不是在前端)。

例如:

<button onClick={() => this.props.history.push('/somethingThatShouldBeRenderedByTheFrontend')}>Render from the frontend</button>
<button onClick={() => this.props.history.push('/somethingThatShouldBeRenderedByTheBackend')}>Render from the backend</button>

当单击“从前端渲染”时，应该渲染“FrontendReactComponent”，但是当单击“从后端渲染”时，应该让名为“XYZ”的 Groovy Controller 被击中，从而渲染一个普惠制页面。我找不到合适的术语来在线研究这个问题。有人知道我可以搜索什么，或者我如何解决这个问题？

编辑:在这里找到有关此问题的更多信息(以及解决方案):React-router urls don't work when refreshing or writting manually

Answer 1

对于您想要做的事情没有简单的解决办法。正如您所经历的，React 路由器只能处理已加载的前端应用程序的状态(即浏览器的状态、已加载的脚本等)

如果你需要让后端渲染一个全新的页面，你不能只推送状态(到前端路由器组件)，你基本上需要将浏览器导航到一个新的 URL，这将使它重新获取页面 - 即使这看起来与浏览器的位置字段和历史记录非常相似，但它是非常不同的事情，因为它将重新加载所有客户端脚本和状态。

还要考虑这些 URL 如何用作书签 - 您必须确定后端应处理哪些 URL，以及哪些 URL 应仅加载客户端应用程序，然后导航到所请求的组件。

我会做一些不同的事情:如果你 - 对于某些页面 - 需要在服务器端渲染大量 HTML，为此制作一个 Controller ，但没有页眉和页脚:基本上制作一个“后端镜像” React 组件将从服务器获取所需的 HTML 并将其渲染到(使用innerHtml 属性)。