반응형
깃허브 페이지에 리액트 프로젝트를 배포한 후 404 오류가 뜨는 경우가 있다. 루트 디렉토리가 아니라 서브 디렉토리(ex. https://mygithub.github.io/example/서브디렉토리)로 최초 진입하거나, 진입 후 새로고침 할 때 이 현상이 발생하는 것 같다.
해결 방법 1: public 디렉토리에 404.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub Pages</title>
<script type="text/javascript">
var segmentCount = 1;
var l = window.location;
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
l.pathname.slice(1).split('/').slice (segmentCount).join('/').replace(/&/g, '~and~') +
(l.search ? '&q=' + l.search.slice(1) .replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>
해결 방법 2: index.html 내 스크립트 추가
<script type="text/javascript">
(function (l) {
if (l.search) {
var q = {};
l.search.slice(1).split('&').forEach(function (v) {
var a = v.split('=');
q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
});
if (q.p !== undefined) {
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + (q.p || '') +
(q.q ? ('?' + q.q) : '') +
l.hash
);
}
}
}(window.location))
</script>
해결 방법 3: Hash router 사용
이는 SEO 최적화에 좋지 않기에 패스.
반응형
'웹_프론트엔드 > React' 카테고리의 다른 글
[리액트] react-daum-postcode 우편번호 검색 컴포넌트 예시 (0) | 2023.11.23 |
---|---|
[리액트] 컴파운드 컴포넌트 패턴으로 작성하는 모달 컴포넌트 (+ dialogue 태그 활용) (0) | 2023.09.18 |
[JSX] 조건에 따른 JSX 작성 패턴 - if, switch, object 구조 (0) | 2023.07.19 |
리액트 JSX/TSX에서 switch 문법 사용하기 (0) | 2023.02.03 |
[React.ts] props로 setState 넘길 때 타입 지정하는 방법 (0) | 2022.12.19 |