[React] react-router 배포 시 이슈

I'm Your Cho-i·2022년 9월 7일
0

React

목록 보기
3/13
post-thumbnail

라우터가 가리키는 /경로는 https://cho-i.github.io 주소뒤에 오는 /경로임(https://cho-i.github.io/). 하지만 현재 내 프로젝트는 /react-voca/ 경로에 존재함.

즉, 라우터는 https://cho-i.github.io/로 이동하려고 하지만, 실제 프로젝트는 https://cho-i.github.io/react-voca/에 있기 때문에 의도대로 동작하지 않음.

📌Solution

1. HashRouter 사용

https://cho-i.github.io/#/react-voca/

BrowserRouter와 유사하지만 주소 사이에 # 해쉬값이 들어감.
history.state를 사용할 수 없음.
새로고침 문제가 없으나 권장되지 않는 Router.

검색엔진이 읽지 못함
서버에 요청이 가지 않는다 ➡ 백엔드 서버가 필요하지 않는 상황 (정적인 페이지)에서 주로 사용됨 ➡ 서버가 주소의 이동을 모르게 됨 (페이지 존재유무에 대해서 모름)

2. BrowserRouter에 basename 추가

<BrowserRouter basename={process.env.PUBLIC_URL}>
	<App />
</BrowserRouter>

basename props를 추가함으로써 프로젝트의 기본 URL을 설정할 수 있음.

즉 라우터한테 기본 URL을 제공하여 /이 아닌 레포지토리 주소 /react-voca/로 이동하라고 지시하는 것. 이렇게 하면 github pages를 이용한 React 프로젝트 배포 시 생기는 라우팅 오류를 없앨 수 있음.

리액트로 만든 html 페이지를 배포할 때 https://cho-i.github.io 경로에 배포하면 아무런 문제가 없지만 https://cho-i.github.io/어쩌구/ 경로에 배포하면 /어쩌구.png 이렇게 쓴 파일을 찾을 수 없다고 나올 수도 있음.
그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 된다고함.

profile
https://github.com/Cho-i

0개의 댓글