dropwizard 应用程序中的配置更改以使用 react browserHistory [英] 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
.
我了解客户端渲染和服务器端渲染,而且我需要为/ui 执行 GET
调用并在客户端路由其余部分,但我找不到任何相关文档如何在 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
服务器的文档,但我找不到 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 browserHistory的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!