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:
-
用Dropwizard注册过滤器:
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屋!