[Note] React Router 새로고침 GET - /XXX 404 에러 해결하기

◆ Webpack devServer 를 사용하는 경우

historyApiFallback: true 옵션을 추가해줍니다.

 

module.exports = {
    devServer: {
        historyApiFallback: true,
        contentBase: path.join(__dirname, 'dist'),
        compress:true,
        port:3000
    }
};

 

 

◆ NGINX 웹서버를 사용하는 경우 - nginx.conf 에 try_files 추가

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;
        index index.html;

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