[Error] react-router-dom route 'cannot GET' error

분명 route 설정을 제대로 했는데 설정한 URL 경로로 갔을 때 cannot Get 에러를 목격 했다면

webpack의 mode가 development일 확률이 크다~!!

 

결론부터 말하자면, 2가지 방법이 있다.

1. webpack.config.js에서 아래와 같이 설정하면 된다.

module.exports = {
    mode: "development",
    devServer: {
        historyApiFallback: true,
    }
}

2. webpack serve에 옵션을 추가하면 된다.

npx webpack serve --history-api-fallback

그렇다면 devServer의 historyApiFallback이 무엇을 의미하는지 알아보자.

 

먼저, React는 모두가 알다시피 SPA(Single Page Application)이다. 

따라서 라우터를 이용해 페이지를 전환하게 된다.

 

하지만 서버는 라우팅 된 주소를 알지 못하기 때문에 404 response를 리턴해주어 위에서 발생한 cannot Get error가 발생한 것이다.

이를 index.html 파일을 제공하여 브라우저에서 라우팅 된 주소로 SPA 페이지를 로딩할 수 있도록 해주는게 historyApiFallback 옵션이다.