Question

我将react.js应用程序上传到服务器。我正在使用nginx服务器。申请工作正常。但是当我去其他页面＆amp;刷新，网站无法正常工作。它显示404 Not found错误。

我该如何解决这个问题。

谢谢。

Answer 1

当您的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发送回浏览器。

Answer 2

此处给出的答案是正确的。但是，在尝试将我的React应用程序部署在Docker容器中时，我为此感到困惑。问题出在哪里，如何更改docker容器内的nginx配置。

第1步：准备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容器。

步骤2：在应用程序根文件夹中有一个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;
    }
}

第3步：现在构建docker映像并运行它

$ docker build . -t react-docker

这应该成功构建您的docker映像。要进行检查，请运行

$ docker images

现在运行

$ docker run -p 8000:80 react-docker

并导航至http://localhost:8000

这是受this blog启发的。

Answer 3

对我来说解决方案是：

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

Answer 4

尝试在启用站点的

中使用以下命令

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

try_files $uri $uri/ /index.html;

现在给我一些塔！

Answer 5

问题出在当您在例如http：/// some / path的路径中并且您单击刷新时会出现404错误页面。 ngnix配置中的这一额外行可以解决此问题。

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

添加后，重新启动nginx服务。

Answer 6

这对我有用

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

Answer 7

几个小时后，我终于与之合作：

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

最后一个参数（= 404）是使这项工作成功的原因。

react.js应用程序显示在nginx服务器中找不到404

7 个答案: