当前位置: 首页 > 知识库问答 >
问题:

使用Nginx对路由器html5 pushstae作出反应

姬奇思
2023-03-14

我有一个react应用程序(使用react路由器和html5 pushstate路由),我想http://example.com/v2作为我的新网站服务器的基本路径

我使用以下nginx配置:

这是为了捕获 /v2并使用新的js文件

location ^~ /v2 {
        alias /usr/local/theapp/dist;
        try_files $uri $uri/ /v2/index.html;
        access_log /var/log/nginx/theapp/acces.web.log;
        error_log /var/log/nginx/theapp/error.web.log debug;
}

location ~ ^/(v2)/.+\..+$ {
        try_files $uri =404;
       alias /usr/local/theapp/dist;
       error_log /var/log/nginx/theapp/error.web.log debug;
}

因为对于第一个位置块,即使是404也会被重定向到v2/index.html,所以第二个位置的意图是用扩展来处理uri,所以如果http://example.com/v2/user/profile/picture.jpg不存在,那么我仍然会得到正确的404资源没有发现错误。

上述代码显然不起作用,因为^~的优先级高于~。尝试使用2~但我得到try\u文件重定向循环:(

共有1个答案

孟健
2023-03-14

正如您所注意到的,将不会访问第二个位置块。另外,当与正则表达式位置结合使用时,别名更为复杂。有关更多信息,请参阅此文档。

同时使用别名try_文件可能会导致问题(请参阅此长期存在的错误)。

尝试:

location ^~ /v2 {
    alias /usr/local/theapp/dist;

    if (!-e $request_filename) {
        rewrite ^[^.]*$ /v2/index.html last;
    }

    access_log /var/log/nginx/theapp/acces.web.log;
    error_log /var/log/nginx/theapp/error.web.log debug;
}

请参阅本说明,了解如何使用if

 类似资料:
  • 我正在构建一个基本的react-login应用程序,用于教育目的,并使用React-router的onEnter prop功能验证一条路由 一切都按预期工作,但我不明白为什么路由器会在一眨眼的时间内渲染Home组件,然后在我登录后尝试路由时将路由替换为?如果我登录后尝试或,也会发生同样的事情。,有办法修复这种行为吗?? 我已经尝试通过在componentWillMount方法中对用户进行身份验证来

  • 我已经稍微调整了React路由器的私有路由示例,以便与Redux玩得很好,但是当链接或重定向到其他页面时,不会呈现任何组件。这个例子可以在这里找到: https://reacttraining.com/react-router/web/example/auth-workflow 他们的PrivateRoute组件如下所示: 但是,因为我已经把它合并到一个Redux应用程序中,我不得不稍微调整一下私

  • 我的目标是让http://mydomain/route1呈现React组件Component1,让http://mydomain/route2呈现component2。因此,我认为编写如下路线是很自然的: http://mydomain/route1按预期工作,但http://mydomain/route2反而呈现Component1。 然后我读了这个问题,并将路线改为:

  • 我已经被困在这个问题上好几天了,我需要互联网的帮助。 我已经为我的react应用程序创建了一个静态HTML登录页项目(这两个项目是分开的),我希望使用Nginx为这两个项目提供服务。我的登录页项目有自己的目录结构和资产,如下所示: 我的React应用程序是一个创建React应用程序,据我所知,在运行npm build之后,它会为您提供一个名为的文件夹,并将所有项目文件正确绑定,以便您可以部署它。现

  • 我的导航不工作,因为某些原因,我有另一个应用程序运行良好,但这一个不能找到错误,请帮助 反应路由器不工作。反应JS 我需要你的帮助。 使用react-router,我可以使用Link元素创建由react router本地处理的链接。