라우터가 가리키는 /
경로는 https://cho-i.github.io
주소뒤에 오는 /
경로임(https://cho-i.github.io/
). 하지만 현재 내 프로젝트는 /react-voca/
경로에 존재함.
즉, 라우터는 https://cho-i.github.io/
로 이동하려고 하지만, 실제 프로젝트는 https://cho-i.github.io/react-voca/
에 있기 때문에 의도대로 동작하지 않음.
https://cho-i.github.io/#/react-voca/
BrowserRouter와 유사하지만 주소 사이에 # 해쉬값이 들어감.
history.state를 사용할 수 없음.
새로고침 문제가 없으나 권장되지 않는 Router.
검색엔진이 읽지 못함
서버에 요청이 가지 않는다 ➡ 백엔드 서버가 필요하지 않는 상황 (정적인 페이지)에서 주로 사용됨 ➡ 서버가 주소의 이동을 모르게 됨 (페이지 존재유무에 대해서 모름)
<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
이것도 더해주면 된다고함.