react github 배포시 경로 오류

포트폴리오 만들던 도중 잘나오는지 확인좀 해보려고
깃허브에 올리고 주소를 확인했는데
얼라리 빌드후 내파일들이 경로가틀렸는지 불러오지않는것이다

알아보니 SPA가 홈페이지를 설정하면 GitHub Pages는 기본적으로 서브디렉터리에서 앱을 호스팅해서 이로 인해 라우팅이 제대로 작동하지 않았던 것이였다.

방법은 두가지가 있었고

1. package.json 으로 들어가 추가시켜준다.

"homepage": "."

2. BrowserRouter 대신 HashRouter 사용하는것이다. React Router의 BrowserRouter는 HTML5 히스토리 API를 사용하여 브라우저의 URL을 조작합니다 그러나 GitHub Pages와 같이 서브디렉터리에서 호스팅할 때 문제가 될 수 있기때문에 대신 HashRouter를 사용하면 해결될 수 있다.

import { HashRouter as Router, Route, Routes } from "react-router-dom";