使用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:
希望有帮助.
这篇关于使用Nginx通过React Router App获取404的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!