dropwizard 应用程序中的配置更改以与 react browserHistory 一起使用

Question

我在 dropwizard 服务器上有一个 react 应用程序运行。 bundle.js 在 /ui 上提供。当我在 /ui 上打开 url 并导航应用程序（并转到 /ui/content）时，它工作正常。但是当我尝试刷新特定页面时，如 /app/content，它会给出 404。

我知道客户端渲染和服务器端渲染，我还需要为 /ui 调用 GET 并将其余部分路由到客户端，但我找不到dropwizard 中有关如何执行此操作的任何文档。

我也知道使用 hashHistory 代替 browserHistory 会起作用（因为 url 的散列部分不会发送到服务器），但我想知道是否这可以通过 browserHistory 来完成。

有关于如何配置 express 服务器的文档，但我找不到 jetty/dropwizard 的任何内容。

Answer 1

在 Dropwizard 级别，您可以使用一个使用 servlet 过滤器的东西来重写 URL。一种流行的实现是 Tucky UrlRewriteFilter。您将按如下方式实现它：

使用 Dropwizard 注册过滤器：

@Override
public void run(ExampleConfiguration configuration, Environment environment) {
    FilterRegistration.Dynamic registration = environment.servlets()
            .addFilter("UrlRewriteFilter", new UrlRewriteFilter());
    registration.addMappingForUrlPatterns(null, true, "/*");
    registration.setInitParameter("confPath", "urlrewrite.xml");
}

将 urlrewrite.xml 配置文件添加到您的 src/main/resources，添加重写规则
```
<urlrewrite>
    <rule>
        <from>^/(?!(api|static/|manifest\.json|assets-manifest\.json|favicon\.ico)).*$</from>
        <to type="forward">/index.html</to>
    </rule>
</urlrewrite>
```
上述规则规定，如果请求路径与上述正则表达式匹配，则将请求转发到index.html 文件。我用来测试的是 create-react-app，其中输出是匹配器中列出的一些文件。那些文件不应该转发。

正则表达式使用负前瞻，所以它就像一个否定。看起来我是在说如果路径与那些文件匹配，则转发，但实际上恰恰相反。如果您不使用 create-react-app，那么您的正则表达式看起来会有所不同。关键是否定你不想转发的文件。

我整理了一个工作演示。查看 GitHub repo.

dropwizard 应用程序中的配置更改以与 react browserHistory 一起使用

Configuration changes in dropwizard application to work with react browserHistory

java

react-router

react-redux

dropwizard

browser-history