PHP 호스팅에서 React Router

이미 아시다시피, 빌드 후 React 프로젝트는 어떤 호스팅에든 올려서 바로 작동시킬 수 있는 일반 정적 파일입니다.

그러나 React Router에는 문제가 있습니다. 문제는 Router가 작동 중에 브라우저의 페이지 URL을 변경한다는 점입니다. 이때 페이지는 실제로 다시 로드되지 않고, JavaScript만으로 URL이 변경됩니다.

호스팅에 올려진 사이트에서 Router는 작동할 것입니다. 하지만, 메인 페이지를 제외한 사이트의 어떤 페이지에 있을 때, 페이지를 새로고침하면 404 오류가 발생합니다.

이는 논리적입니다. 브라우저는 주어진 URL로 파일을 찾을 것이고, 이는 정적 사이트가 일반적으로 작동하는 방식입니다. 그러나 우리 애플리케이션에는 그런 페이지가 없을 것입니다. 왜냐하면 우리는 페이지를 시뮬레이션할 뿐, 실제로 우리의 모든 애플리케이션은 index.html에서 작동하기 때문입니다.

이 문제를 해결하려면, 실제로 존재하는 파일로 연결되지 않는 모든 URL이 index.html로 리디렉션되도록 해야 합니다. 이는 호스팅에서 작동하는 웹 서버의 기능을 사용하여 수행됩니다.

가상 호스팅은 PHP에서 작동합니다. 일반적으로 서버로 Apache가 사용됩니다. 여기에는 특별한 파일 .htaccess가 있으며, 이를 사용하여 리디렉션을 설정할 수 있습니다.

이를 위해 사이트의 루트에 다음 내용을 가진 .htaccess 파일을 배치해야 합니다:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

React Router가 있는 프로젝트를 만드세요.

호스팅에 업로드하세요. 기본적으로 라우팅이 작동하지 않음을 확인하세요.

.htaccess 파일을 사용하여 문제를 해결하세요.