REACT 새로고침시 cannot/get

리액트를 express 환경에서 실행하였을때, 새로고침하면 라우트 설정이 잘 되어있음에도 cannot/get 현상이 발생하였다.

 

 

 

https://ui.dev/react-router-cannot-get-url-refresh

Fixing the 'cannot GET /URL' error on refresh with React Router (or how client side routers work)

 

위 글을 참고해서 수정하였다.

 

 

쉽게설명하자면 원리는 다음과 같다.

 

리액트는 결국 index.html 파일 한게로 이루어지는 SPA (Single Page Application) 방식이다.

즉, 라우트로 설정해준 경로는 실제 경로라기보다는 주소를 url창에 띄어준다는 표현이 맞다.

 

그런데 결국 리액트는 자바스크립트이다.

 

이게 무슨말인가..?

 

만약 localhost:8080/ 이라는 페이지가 들어온다고 생각해 보자.

 

express에서는 해당 url주소로 get을 받고, index.html을 띄워주게 된다.

즉, localhost:8080/login이 오면 해당 url로 get을 받을 것이다.

 

하지만 이 url을 express가 받은 시점에는 자바스크립트고 뭐고 실행된 것이 없기때문에 라우팅을 진행시켜주지 못한다.

 

리액트의 라우트가 주소를 담당하는데, 리액트가 적용되기도 전에 url이 들어오기 때문에 오류가 발생하는 것이다.

 

 

따라서 해결방법은 아래와 같다.

 

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

만약 뒤에 url이 붙은 형태로 get요청이 들어온다면, 서버에서 리액트 페이지와 연동되게 파일을 보내주는 작업을 설정해주면 된다.

 

해당 글 맨위에 올린 링크를 보면, express가 아닌 다른 환경에서 서버를 빌드하였을 경우의 솔루션도 제공하고있으니 참고해보면 좋을 것 같다.