[react] react-router 특정 URL로 바로 접근시 '404 페이지를 찾을 수 없습니다.' 에러 해결방법!

 

 

react-router의 경우 production으로 빌드 배포시 BASE URL이 index.html와 연결된다.

그래서 index.html을 통해 링크를 클릭하여 페이지(URL) 이동을 하면 문제 없이 잘 된다.

그런데 아래와 같이 브라우저에 BASE(/) 이외의 주소로 직접 접근 시 아래와 같이 HTTP 404 ERROR을 맞이하게 된다.

 

http://127.0.0.1/signin

 

 

해결방법은 간단하다.

 

nginx.conf를 아래와 같이 수정한다.

 

...
#       location / {
#               # First attempt to serve request as file, then
#               # as directory, then fall back to displaying a 404.
#               try_files $uri $uri/ =404;
#       }

        location ~* \.(?:manifest|appcache|html?|xml|json)$ {
      			expires -1;
      			# access_log logs/static.log; # I don't usually include a static log
    	}

    	location ~* \.(?:css|js)$ {
      			try_files $uri =404;
			    expires 1y;
      			access_log off;
      			add_header Cache-Control "public";
    	}

    	# Any route containing a file extension (e.g. /devicesfile.js)
    	location ~ ^.+\..+$ {
      			try_files $uri =404;
    	}

    	# Any route that doesn't have a file extension (e.g. /devices)
    	location / {
        		try_files $uri $uri/ /index.html;
    	}
...

 

 

 

 

 

 

 

 

 

참조: wkdtjsgur100.github.io/react-router-deploy/