[Github actions + React]배포 후 navigate 상대 경로 에러

React, Typescript, Vite로 진행중인 프로젝트를

Github actions으로 배포함

https://<User name|| Organization name>/.github.io/<Repo>/

이런식으로 무료 도메인을 받음

 

에러 요약 : /<Repo>부분은 base url로 인식이 안됨.

 

에러설명 :

1. 부여받은 도메인을 클릭하면 홈이 안뜨고 404가 뜸

2. 예를들어서 로그인 페이지로 이동한다고 해보자, 로그인 버튼을 클릭하면 '/BaseUrl/<Repo>/ LogIn' 로 가는게 아니라 '/BaseUrl/LogIn' 으로 감..

홈으로 가는 버튼 클릭해도 '/BaseUrl/<Repo>'로 안가고  '/BaseUrl/ '으로감.. 

 

하..진짜

에러해결 방법:

 

createBrowserRouter 함수의 두번째 인자로 basename을 설명해주면 됨.

 

에러 원인: 만약 로그인 페이지로 이동한다고 했을 때 navigate('login') 으로 설정하면 문제가 안 됨,

하지만  navigate('/login') 으로 하면 상대경로로 해석되기때문에 'BaseUrl /login' 으로 이동함.

 

따라서 위와 같은 방법으로 설정해주면 기본루트 다음에 basename의 값이 붙기때문에 해결할 수 있다.

 

결론 : React Router는 기본 URL을 자동으로 감지하지 않으며, 명시적으로 설정해야 함