React 배포시 refresh -> 404 문제

문제가 발생하는 원인

리액트앱은 '/' 가 아닌 곳에서 새로고침을 하면 404 페이지가 뜬다.

이유는 리액트는 단하나의 index.html을 파싱하기 때문에 라우팅 가능한 곳은 사실상 '/' 밖에 없다.

그런데 우리가 react에서 routing 을하면서 이동하면 주소가 /login/user. .. 등등 이런식으로 바뀌게되고

이때 새로고침을 했을때는 서버에서 '/'를 찾는 것이아니라 '/login/user'를 찾게되는 것이다.

즉, 존재하지 않는 GET요청을 보내게 된다.

 

해결방법

1. HashRouter 사용하기 : 주소에 #이 붙음으로서, 일반적인 GET요청과 react-router-dom에서의 요청이 구분된다.

2. webpack.config.js 에서 historyApiFallback:true 추가하기

3. 호스팅 환경별 redirect 를 index.html로 설정하기 (사이트별로 가이드라인 따라야됨), 자체적 호스팅이라면 서버사이드에서 설정해주기

 

Netlify 의 경우(나의 경우)

/public/_redirects 생성 후 아래 내용을 입력하고, 다시 빌드 & 배포

/*    /index.html   200