[React] router direct url or refresh 404 Not Found 에러 발생 해결

 

클릭하면 Route 에서 설정한 path 대로 사이트 이동이 정상적으로 되는데, 직접 url 을 입력하거나 새로고침하는 경우엔 404 에러가 났다. 

 

[클릭시 정상적으로 이동] 

 

[해당 url 직접 입력 또는 새로고침시 에러 발생]

 

 

프론트 개발 시 수정사항이 있을 때마다 `npm build` 하고, output 파일이 생성되면 index.html 을 띄우는 방식으로 확인해야 한다면, 우리는 서비스를 완성하기도 전에 지쳐 쓰러질 것이다. 

이를 해결하기 위한 방법으로는 `webpack-dev-server` 라이브러리를 사용하면 되는데, 해당 라이브러리를 사용하면 개발 서버를 띄우고 즉각적인 수정사항이 반영되도록 할 수 있다.

하지만 라우팅이 되지 않는 문제가 발생한다...^_^

 

보통 개발 서버에서는 요청된 경로에 대한 정적 파일을 제공하는데, 라우팅을 사용하는 SPA 의 경우에는 정적 파일이 아니라 동적으로 생성된 컴포넌트를 제공해야 하기 때문이다. 

 

 

이를 해결하기 위해선 webpack.config.js 파일에 `historyApiFallback` 값만 추가해주면 된다. 

devServer: {
    port: 3000,
    liveReload: true,
    host: "localhost",
    allowedHosts: "all",
    // 해당 항목 작성
    historyApiFallback: true,
  },

 

 

historyApiFallback 옵션을 활성화 해주면 개발 서버에서 요청된 모든 경로에 대해 항상 index.html 파일을 제공해준다.

이렇게 설정하면 개발 서버는 모든 경로에 대해 index.html 을 반환하므로, 애플리케이션은 라우팅 경로에 따라 적절한 컴포넌트를 렌더링할 수 있게 된다.

따라서 브라우저의 주소 표시줄에 직접 경로를 입력하거나 페이지를 새로고침할 때도 올바른 라우팅 동작을 확인할 수 있다.

 

 

[References] 

https://velog.io/@wjdska245/react-router-dom-정상경로-404에러-발생-해결

https://velog.io/@wusi-hub/우아한테크코스-프로젝트-Webpack의-historyApiFallback-설정으로-라우팅-문제-해결하기