깃허브 데스크탑 - Hash Router로 gh-pages 배포하기

Git / GitHub 전체 링크

리액트 전체 링크

 

참고

- 리액트 프로젝트 추가하기 (new repository)

- gh-pages로 리액트 프로젝트 배포하기

- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기

- Hash Router로 gh-pages 배포하기

- 404 에러를 수정한 Browser Router로 gh-pages 배포하기

- Github Desktop에서 리액트 프로젝트 받아오기

 

gh-pages로 깃허브에 무료 호스팅으로 배포한 후, 리액트 라우터까지 적용하였다.

현재 라우터가 적용되어서 r2 page를 보여주고 있는 상태인데, 여기서 F5(새로고침)를 눌러보자.

 

깃허브에서는 BrowserRouter 기능을 제공하지 않아서 /r2가 포함된 URL을 알지 못한다.

따라서 gh-pages에서 404 File not found Error가 발생한다.

---

해결방법

 

index.js에서 BrowserRouter를 지우고 HashRouter를 사용하면 된다.

 

HashRouter를 설정할 때, basename을 설정할 필요는 없다.

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

적용이 완료되었으면 배포하자.

npm run build
npm run deploy

 

배포가 되었다면 URL 끝에 # 이 추가된다.

 

# 뒤에 라우터가 변경되고, 새로고침을 해도 404 에러가 발생하지 않는다.