使用Nginx通过React Router App获取404 [英] Getting 404 with react router app with nginx

问题描述

我有一个React前端应用程序，它使用react-router创建不同的路由.在开发服务器上，它可以正常工作，但是当我构建项目时，它会给我404，同时直接使用不同的路径访问它.网站以xyz.net完美打开.当我尝试使用xyz.net/login访问它时，它会显示404.

I have a react frontend app that uses react-router to create different routes. On development server its working fine but when I build the project it gives me 404 while accessing it with different routes directly. Website perfectly opens with xyz.net. And it gives 404 when I try to access it with xyz.net/login.

这是我的nginx conf

Here is my nginx conf

server {

listen 80;
server_name  xyz.net www.xyz.net;
root /root/frontend/react/build/;
index index.html;


location /api/ {

    include proxy_params;
    proxy_pass http://localhost:8000/;
}

}

推荐答案

当我遇到此问题时，这对我有用:

This worked for me when I ran into this issue:

location / {
                #...
                try_files $uri $uri/ /index.html$is_args$args;
                #...  
      }

但是，我在其他项目中遇到了错误，这些项目使用*.ejs模板进行开发构建，而使用*.html插件进行Webpack的生产构建.我在这里找到答案:

However, I've encountered errors in other projects using *.ejs templates for development builds, and *.html plugins for production builds with webpack. The answer to which I found here:

在启用SSL的URL刷新时，React-router问题

希望有帮助.

这篇关于使用Nginx通过React Router App获取404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！