[React] BrowerRouter 새로고침 시 빈화면 net::ERR_ABORTED 404 (Not Found)

BrowerRouter 새로고침 시 빈화면

---

 

리액트18 버전으로 React-router-dom v6 버전을 사용하고 있고, 타입스크립트를 적용해서 수동으로 웹팩 설정까지 해놓은 상태에서 발생된 에러입니다. 버전 문제는 아니지만, 새로고침 할 때 빈 화면이 보이는 현상이 나타나더라구요. 콘솔 창에서 네트워크 탭에 가서 확인해보니 /about/app.js 경로로 JS 파일을 호출하고 있었습니다.

 

정상적이라면 루트경로에 /app.js를 호출해야합니다.

 

 

콘솔 에러 메세지

---

http://localhost:3000/about/app.js net::ERR_ABORTED 404 (Not Found)

 

 

 

BrowserRouter에서 HashRouter로 변경하면 정상작동 했지만.. 알아보니 웹팩 설정 문제였습니다.

 

// webpack.config.tsx
...

output: {
	path: path.join(__dirname, 'dist'),
	filename: 'app.js',
	publicPath: '/', // <-- 이 녀석이 있어야함..
},
...

 

output에 publickPath 값을 주고 해결됐습니다.