react router 정상경로 404 Not Found 에러 발생 해결

NavLink 로 사이트 이동이 정상적으로 되는데 직접 주소를 입력해 접속할 경우 또는 새로고침 할 때 404 에러가 나는 경우가 있다.

이럴 때 는 webpack.config.js 파일에서 historyApiFallback 설정을 추가 하지 않았거나 true 값이 아닐 수 있기 때문에 webpack 파일 내용을 확인 해 보아야한다.
해당 항목에 대한 자세한 설명은 webpack 공식 문서를 참고해 주길 바라며, 해당 현상은 이런 이유도 있다는걸 알려 주고 싶었다 !




[ NavLink 정상 작동 후 화면 ]

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

[해결 방법 => webpack.config.js 파일에 historyApiFallback 값 추가]

devServer: {
    port: 3000,
    liveReload: true,
    host: webpackArgv.nodeEnv === "local" ? "localhost" : "0.0.0.0",
    allowedHosts: "all",
    open: true,
    // 해당 항목 작성
    historyApiFallback: true,
  },