Docs: Add SPA routing fix for IR Valuation frontend
This commit is contained in:
parent
d728623947
commit
2c9e31f271
@ -72,6 +72,41 @@ sudo systemctl reload nginx
|
||||
- `http://ro-being.com/ir-valuation`
|
||||
- `http://124.55.18.179/ir-valuation`
|
||||
|
||||
## SPA 라우팅 문제 해결
|
||||
|
||||
**문제**: `/ir-valuation` 경로 접근 시 nginx는 200 OK를 반환하지만 브라우저에서 404 표시
|
||||
|
||||
**원인**:
|
||||
- nginx는 정상적으로 `dist/index.html`을 서빙 (curl/Network 탭 모두 200 OK)
|
||||
- 하지만 `App.tsx`의 wouter 라우터가 `path="/"`만 정의되어 있어 `/ir-valuation` 경로에서 매칭 실패
|
||||
- SPA 내부 라우터가 404 컴포넌트를 렌더링
|
||||
|
||||
**해결**:
|
||||
- `App.tsx`에 base path 처리 로직 추가
|
||||
- `useLocation` hook으로 `/ir-valuation` base path를 제거하고 라우팅
|
||||
|
||||
**파일**: `src/App.tsx:14-25`
|
||||
```typescript
|
||||
function Router() {
|
||||
const [location] = useLocation();
|
||||
const basePath = "/ir-valuation";
|
||||
const normalizedLocation = location.startsWith(basePath)
|
||||
? location.slice(basePath.length) || "/"
|
||||
: location;
|
||||
|
||||
return (
|
||||
<Switch location={normalizedLocation}>
|
||||
<Route path="/" component={IRValuationPage} />
|
||||
<Route component={() => <div>404 Not Found</div>} />
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**검증**:
|
||||
- `https://ro-being.com/ir-valuation/` 접근 시 IR 평가 페이지 정상 표시
|
||||
- 네트워크 요청 모두 200 OK 확인
|
||||
|
||||
## 다음 단계
|
||||
|
||||
1. **백엔드 연동**: rb8001 API 엔드포인트 구현
|
||||
@ -91,6 +126,8 @@ sudo systemctl reload nginx
|
||||
- frontend-customer 구조를 참고하여 빠르게 프로젝트 생성 가능
|
||||
- nginx 설정은 두 서버 블록(HTTP/HTTPS) 모두에 추가 필요
|
||||
- 빌드 산출물은 `/home/admin/frontend-ir-valuation/dist/`에 저장
|
||||
- **SPA 라우팅**: nginx base path(`/ir-valuation`)와 React 라우터 경로를 일치시켜야 함
|
||||
- wouter는 base path를 자동 처리하지 않으므로 `useLocation`으로 수동 처리 필요
|
||||
|
||||
---
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user