Dropwizard应用程序中的配置更改可与React Browser一起使用 [英] Configuration changes in dropwizard application to work with react browserHistory

问题描述

我有一个 react 应用程序在 dropwizard 服务器上运行。 bundle.js 在/ ui上投放。当我在/ ui上打开url并浏览应用程序（并转到/ ui / content）时，它工作正常。但是，当我尝试刷新/ app / content之类的特定页面时，它会显示 404 。

I have a react app running on a dropwizard server. The bundle.js is served on /ui. When I open the url on /ui and navigate the app(and goto /ui/content), it works fine. But when I try to refresh a specific page like /app/content, it gives a 404.

我了解客户端渲染和服务器端渲染，并且还需要对 GET 进行调用ui并将其余的路由到客户端，但是在 dropwizard 中找不到有关如何执行操作的任何文档。

I know about client side rendering and server side rendering and also that I need to do a GET call for /ui and route the rest on client side, but I couldn't find any documentation for how to do it in dropwizard.

我也知道使用 hashHistory 代替 browserHistory 将起作用（因为URL的哈希部分未发送到服务器），但是我想知道是否可以使用browserHistory完成。

I also know using hashHistory in place of browserHistory will work(as the hash part of the url is not sent to the server), but I wanted to know if this can be done with browserHistory.

有关于如何配置 express 服务器的文档，但对于<$ c $我找不到任何东西c> jetty / dropwizard 。

There is documentation on how to configure an express sever but I could not find anything for a jetty/dropwizard.

推荐答案

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

At the Dropwizard level, one thing you can use a use servlet filter to rewrite the URL. One popular implementation is the Tucky UrlRewriteFilter. You would implement it as follows:

1. 用Dropwizard注册过滤器：

1. Register the filter with 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 ，添加重写规则

Add the urlrewrite.xml configuration file to your src/main/resources, adding a rewrite rule

<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 ，其中输出为匹配器中列出的文件很少。那些文件不应转发。

The above rule states that if the request path matches the above regex, then forward the request to the index.html file. What I used to test was the create-react-app, where the output is a few of those files listed in the matcher. Those files should not be forward.

正则表达式使用负的超前查询，因此就像否定一样。好像是我说的是，如果路径与这些文件匹配，则向前，但实际上相反。如果您不使用create-react-app，则您的正则表达式将有所不同。关键是否定您不想转发的文件。

The regex uses a negative lookahead, so it's like a negation. It may look like I'm saying that if the path matches those files, then forward, but it's actually the opposite. If you are not using the create-react-app, then your regex will look different. The point is to negate the files you don't want forwarded.

我整理了一个有效的演示。查看 GitHub存储库。

I put together a working demo. Check out the GitHub repo.

这篇关于Dropwizard应用程序中的配置更改可与React Browser一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！