[React] github pages에서 라우팅한 페이지 새로고침 시 404 해결하기

 

React Router 사용 시 라우팅 된 페이지에서 새로고침을 하니 404 오류가 발생했다.

서버가 해당 경로를 알지 못하기 때문에 발생하는 오류였다.

 

이 문제는 Single Page Application (SPA)에서 발생하는 일반적인 문제로,

웹 서버가 요청된 URL 경로를 직접 처리하지 않고

애플리케이션의 라우팅 시스템이 처리하기 때문이다.

 

• 서버 측 라우팅
  SPA에서는 클라이언트 측에서 JavaScript 라이브러리(예: React Router)가 URL 경로를 관리한다.
  하지만, 웹 서버는 서버에 존재하지 않는 URL에 대한 요청을 처리하지 못하고 기본적으로 404 오류를 반환한다.
• 브라우저의 새로고침
  브라우저에서 새로 고침을 하면 현재 URL이 서버로 요청되고,
  서버가 해당 URL을 찾을 수 없기 때문에 404 오류를 반환한다.

 

해결 방법

서버가 모든 경로 요청을 index.html로 리디렉션 하여
SPA의 라우팅 시스템에 맡길 수 있도록 설정해야 한다.

 

GitHub Pages는 기본적으로 SPA의 라우팅을 지원하지 않지만,
404.html 파일을 사용해 모든 요청을 index.html로 리디렉션 하도록 설정하는 방법으로 해결했다.

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import Home from "./pages/Home";
import Page from "./pages/Page";

function App() {
  return (
    <Router basename="/repo-name" >
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page" element={<Page />} />
      </Routes>
    </Router>
  )
}

export default App;

1. basename을 해당 저장소의 이름으로 설정한다.
(예: react-test라면 basename=" /react-test ")

 

spa-github-pages

GitHub - rafgraph/spa-github-pages: Host single page apps with GitHub Pages

2. 위에 첨부해 둔 페이지에 접속해서 404.html 파일을 다운로드한다.

 

3. 다운로드한 404.html 파일을 그대로 public폴더에 넣는다.

 

4. 404 html 파일에서 var pathSegmentsToKeep = 0; 해당 부분을 1로 변경한다.

(사이트 주소가 username.github.io/repo-name인 경우) 리디렉션 후 경로에 /repo-name을 유지하려면 404.html 파일에서 pathSegmentsToKeep을 1로 설정해야 한다고 나와있다.

 var pathSegmentsToKeep = 1;

 

4. 아래 코드(리디렉션 스크립트)를 복사해서index.html 파일에 붙여 넣는다.
(head or body 어디에 넣어도 적용된다.)

<script type="text/javascript">
  (function (l) {
    if (l.search[1] === '/') {
      var decoded = l.search.slice(1).split('&').map(function (s) {
        return s.replace(/~and~/g, '&')
      }).join('?');
      window.history.replaceState(null, null,
        l.pathname.slice(0, -1) + decoded + l.hash
      );
    }
  }(window.location))
</script>

 

5. 변경된 파일 모두 저장소에 푸시

 

6. npm run deploy

 

7. homepage로 설정해 둔 주소 들어가서 확인하기