Question

我正在使用的代码在后端Groovy代码中具有控制器，这些控制器呈现GSP（Groovy服务器页面）。对于前端，我们使用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”，但是当单击“从后端渲染”时，应使Groovy控制器“ XYZ”被点击，从而渲染一个GSP页面。我找不到合适的术语来在线研究此问题。有人知道我可以搜索什么，或者如何解决这个问题？

编辑：此处（有关解决方案）找到了有关此问题的更多信息：React-router urls don't work when refreshing or writting manually

Answer 1

您要执行的操作没有简单的解决方法。如您所知，React路由器只能处理已加载的前端应用程序的状态（即浏览器，已加载的脚本等的状态）

如果您需要让后端呈现一个全新的页面，您不仅可以将状态推送到前端路由器组件，还需要从根本上将浏览器导航到一个新的URL重新获取页面-即使它看起来与浏览器的location字段和历史记录非常相似，也是完全不同的事情，因为它将重新加载所有客户端脚本和状态。

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

我会做一些不同的事情：如果您-对于某些页面-需要在服务器端呈现大量HTML，请为此创建一个控制器，但没有页眉和页脚：基本上是“后端镜像” React组件将从服务器获取所需的HTML并将其呈现为（使用innerHtml属性）。

让某些路由由Groovy处理，而另一些由react-router v4处理

1 个答案: