dev

React Router <BrowserRouter>사용시 서브페이지 404 페이지가 뜨는 경우

Vercel에 React로 만든 사이트를 배포할 때 서브페이지로 직접 접속 시 404 에러가 발생하는 문제가 있습니다. vercel.json 파일을 통해 Browser Router에서 서브페이지 라우팅을 처리할 수 있습니다.

순수 React 만 이용해서 만든 사이트를 vercel 에 배포했습니다.

이 사이트는 반응형 HTML/CSS 소스 생성 과 SEO 키워드 분석에 대한 기능을 간소하게 제공하고 있는데,뜻하지 않은 문제가 생겼습니다.

https://app.illustudio.co.kr 루트 주소로는 접속이 잘 되는데, https://app.illustudio.co.kr/keyword 와 같은 서브페이지로 바로 접속했을 경우엔 404 페이지 로 연결된다는 문제입니다.

관련된 내용을 Chat GPT에 물어보니 아래와 같은 답을 주더군요.

React Router를 사용하고 있다면, BrowserRouter를 사용하고 있는지 확인합니다. BrowserRouter를 사용할 때는 서버에서 설정이 필요하며, 서버는 항상 동일한 HTML 파일을 반환해야 합니다.
서버에서 BrowserRouter를 지원하기 어렵다면 HashRouter를 사용하여 해시를 이용한 라우팅을 고려할 수 있습니다.

결국 React Router를 사용하여 Browser Rotuer를 사용할 경우에 서버 설정이 필요하다는 부분이 현재 제가 겪고 있는 문제로 보였습니다.

관련 이슈를 검색해보니 역시 Stack Overflow 에서 답을 찾을 수 있었습니다.

요점은 다음과 같습니다. vercel에 배포했을 경우엔 아래와 같이 vercel.json 파일을 프로젝트 루트 폴더에 작성해주면 됩니다.

// vercel.json
{
  "rewrites":  [
    {"source": "/(.*)", "destination": "/"}
  ]
}

해당 부분이 vercel 에서 router 부분을 index.html로 향하도록 만들어줍니다. 이렇게 처리를 해주어야 BroweserRouter에서 서브페이지 라우팅을 처리할 수 있습니다.

참고 사이트는 아래와 같습니다.