BrowserRouter2 [TypeScript]React 개발 프로젝트에서 BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우 + Vite(트러블 슈팅) 원인 : React로 프로젝트를 개발하다 보면, BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우가 있습니다. 하지만 HashRouter로 변경하면 문제없이 동작하는데 그 이유를 알아보자. BrowserRouter 를 사용하면 화면이 안 나오는 이유 BrowserRouter는 history API를 활용하기 때문에, 사용자가 새로고침을 하면 문제가 발생할 수 있습니다.일반적으로 React 애플리케이션은 단일 HTML 파일(index.html)을 기반으로 동작합니다. 그런데 BrowserRouter를 사용할 경우, 새로고침을 하면 해당 경로(/about 등)에 대한 요청이 서버로 직접 전달됩니다.이는 개발 서버(Vite, Webpack Dev Server 등)가 해당 URL을.. 2025. 2. 28. [TypeScript]BrowserRouter, HashRouter 차이(Vite) 1. BrowserRouter와 HashRouter의 차이BrowserRouter :HTML5의 history API를 사용합니다.URL이 깔끔합니다. (예: http://localhost:5173/about)Vite 서버 설정이 필요하여, 모든 경로에 대해 index.html을 제공하도록 서버를 구성해야 합니다. 그렇지 않으면 404 오류가 발생할 수 있습니다.createRoot(document.getElementById('root')!).render( } /> );HashRouter :URL의 해시(#)를 사용합니다 (예: http://localhost:5173/#/about).서버 설정이 필요 없고, 해시 뒤의 경로는 서버로 전송되지 않기 때문에.. 2025. 1. 30. 이전 1 다음