1. 問(wèn)題描述：
上個(gè)禮拜開(kāi)發(fā)了個(gè)簡(jiǎn)單的單頁(yè)面移動(dòng)端頁(yè)面,地址，然后進(jìn)入到文章詳情，刷新瀏覽器，發(fā)現(xiàn)瀏覽器出現(xiàn)404了佛玄，what happen? 如下圖：
image.png
2. 問(wèn)題原因:
刷新頁(yè)面時(shí)訪問(wèn)的資源在服務(wù)端找不到天梧，因?yàn)閞eact-router設(shè)置的路徑不是真實(shí)存在的路徑营密。
如上的404現(xiàn)象痴奏，是因?yàn)樵趎ginx配置的根目錄/alidata/www/mgeekjc下面壓根沒(méi)有article這個(gè)真實(shí)資源存在南缓，這些訪問(wèn)資源都是在js里渲染的胸遇。
服務(wù)端nginx的一開(kāi)始配置如下（假設(shè)域名為：m.geekjc.com）：
server {
listen 80;
server_name m.geekjc.com;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/javascript application/json text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
root /alidata/www/mgeekjc;
index index.html;
}
如上出現(xiàn)404的原因是由于在這個(gè)域名根目錄/Data/app/xqsj_wx/dist下面壓根就沒(méi)有article這個(gè)真實(shí)目錄存在。
3. 問(wèn)題解決：
在nginx配置里添加react-route的跳轉(zhuǎn)設(shè)置（這里首頁(yè)是index.html汉形，如果是index.php就在下面對(duì)應(yīng)位置替換）纸镊，正確配置如下：
server {
listen 80;
server_name m.geekjc.com;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/javascript application/json text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
root /alidata/www/mgeekjc;
try_files $uri $uri/ @router;
index index.html;
}
location @router{
rewrite ^.*$ /index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
重啟nginx后倍阐，問(wèn)題就迎刃而解了。
如圖:
image.png
