当您的react.js应用加载时，路由由react-router在前端处理。例如，你在http://a.com。然后在页面上导航到http://a.com/b。此路由更改在浏览器本身中处理。现在，当你刷新或打开一个新的标签中的网址http://a.com/b，请求转到你的nginx，其中特定的路由不存在，因此你得到404。
为了避免这种情况，您需要为所有不匹配的路由加载根文件（通常是index.html），以便nginx发送文件，然后路由由浏览器上的react应用处理。要做到这一点，您必须在nginx.conf或sites-enabled中进行以下更改

location / {
 try_files $uri /index.html;
}

这告诉nginx查找指定的$uri，如果找不到，则将index.html发送回浏览器。（详情请参阅https://serverfault.com/questions/329592/how-does-try-files-work）

这里给出的答案是正确的。但是，当我试图在Docker容器中部署我的React应用程序时，我正在努力解决这个问题。问题在于，如何在Docker容器中更改nginx脚本。

第一步：准备Dockerfile

# Stage 1
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build

# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

请参阅命令行：COPY nginx.conf /etc/nginx/conf.d/default.conf。在这里，我们告诉Docker将nginx.conf文件从Docker主机复制到Docker容器。

第二步：在应用根目录下创建一个nginx.conf文件

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;                 
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

第三步：构建Docker镜像并运行

$ docker build . -t react-docker

这应该会成功构建你的Docker镜像。要检查，请运行

$ docker images

现在运行

$ docker run -p 8000:80 react-docker

并导航到http://localhost:8000
这是由this blog启发的。

对我来说，解决方案是：

location / {
            root /var/www/myapp/build;
            index index.html;
            try_files $uri /index.html$is_args$args =404;
    }

几个小时后，我终于得到了这个工作：

try_files $uri /index.html$is_args$args =404;

最后一个arg（=404）是使其工作的原因。

这在我使用nginx服务react时很有效：
编辑nginx.conf（也可以是default.conf）文件的location部分，如下所示。配置文件可以在/etc/nginx/sites-available/yoursite中找到

location / {
   # First attempt to serve request as file, then
   # as directory, then redirect to index(angular) if no file found.
   try_files $uri $uri/ /index.html;
}

因此，完整的nginx.conf配置如下：

server {
        listen 80 default_server;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;

        location /{
            try_files $uri $uri/ /index.html;
        }
    }

问题来了，当你在一个路径，如http：/some/path和你点击刷新你得到一个404错误页面。ngnix配置中的这一行可以解决这个问题。

location /{
                try_files $uri $uri/ /index.html?/$request_uri;
          }

添加后做一个nginx服务重启。

这对我很有效

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

如果你像我一样使用nextjs，也许你需要把它添加到next.config.js中。

module.exports = {
  trailingSlash: true,
}

重新构建您的项目。
供参考：https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

尝试在sites-enabled中使用以下命令

sudo nano /etc/nginx/sites-available/Your_WEB_Folder

try_files $uri $uri/ /index.html;

快给我弄几个塔来！