React 루트 url이 아닌 다른 특정 url에서 새로고침을 하면 404페이지가 뜨는 오류

1. 오류 확인

• 루트 url(https://www.~.com/)이 아닌 다른 url(http://www.~.com/page)에서 새로고침을 하면 404 오류 발생
• 로컬에서는 오류가 없다가 Apache Web Server에 올리니까 오류 발생

 

2. 원인 파악

• index.js가 연결되어야지만 배포가 가능
• React Router를 사용하여 url를 관리하고 있었는데 루트 url 즉 BASE가 되는 url에 경우에는 index.js를 연결시켜 배포하기 때문에 새로고침을 해도 index.js가 배포되지만 다른 특정 url에서 새로고침을 하면 해당 url에 맞는 js를 찾으려고 하기 때문에 오류 발생

3. 해결

• Apache mod_jk에 설정 추가(경로: /etc/httpd/conf/httpd.conf)

<VirtualHost *:80>   ServerName example.com   DocumentRoot /var/www/httpd/example.com   <Directory "/var/www/httpd/example.com">     ...     RewriteEngine on     # Don't rewrite files or directories     RewriteCond %{REQUEST_FILENAME} -f [OR]     RewriteCond %{REQUEST_FILENAME} -d     RewriteRule ^ - [L]     # Rewrite everything else to index.html to allow html5 state links     RewriteRule ^ index.html [L]      </Directory> </VirtualHost>

 

reference

https://wkdtjsgur100.github.io/react-router-deploy/

React Router에서 특정 URL 접속 시 페이지를 찾을 수 없는 문제 원인 및 해결 방법(nginx, node express, apache, jboss web app)