React Router를 사용하여 SPA를 구축하고 Nginx 서버에 정적 파일로 배포했습니다. 메인 페이지에서는 정상 작동하나, 브라우저 새로고침 또는 직접 URL 입력 시 404 Not Found 오류가 발생합니다.
코드:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<div>Home</div>} />
<Route path="/about" element={<div>About</div>} />
</Routes>
</BrowserRouter>
);
}
export default App;
오류: 404 Not Found (Nginx default error page)
시도: `npm run build` 후 `dist` 폴더의 내용을 서버 root에 배치함. 로컬 개발 서버(`npm start`)에서는 정상 작동 확인.
질문: Nginx 설정에서 모든 요청을 `index.html`로 리다이렉트하여 React Router가 경로를 제어하게 하려면 `try_files` 설정을 어떻게 구성해야 합니까?
댓글4
모든 이야기1455
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
총 1455개의 이야기
try_files $uri $uri/ /index.html; 이렇게 넣으면 해결될듯함.
SPA 배포할 때 국룰 설정이라 이거 하나면 바로 될 거예요.
화이팅하세요 ㅋㅋ