[PS][React] Route를 이용했을 때 github pages의 404 에러 해결 (a 태그 -> link to)

1. 해결 방법

1. 문제가 되는 jsx 파일의 이동 경로를 a태그로 설정했는지 Link to로 설정했는지 확인하기
2. Github Pages는 SPA (Single Page Appliction)를 지원하지 않는다.

---

2. 문제 해결 흐름

영화 소개 사이트를 클론코딩하고 내 로컬에서 동작도 잘 되길래 빌드 했다.

https://namani31.github.io/REACT_MOVIE/ 를 들어가서 about 메뉴를 눌러봤더니 404 에러가 떴다.

home이나 detail은 잘 들어가지는 걸 보니 about에 문제가 있단 걸 알아서 코드를 확인해봤다.

import "./Navigation.css";
import {Link} from "react-router-dom";
 
export function Navigation() {
    return (
        <div className='nav'>
            {/* <a href="/">Home</a>
            <a href="/about">About</a> */}
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    );
}JAVASCRIPT

 

주석으로 처리되어 있는  코드를 보면 a태그를 사용하고 있다.

a 태그든 Link 컴포넌트를 사용하든 경로를 잡아주는 건 똑같은 거 아닌가? 했지만 전혀 달랐다.

 

1. a 태그를 클릭하면 브라우저는 해당 경로로 이동하면서 페이지를 리로드 한다.
2. 이 과정에서 Github Pages는 서버에서 그 경로에 해당하는 파일을 찾으려고 시도한다.
3. /about 페이지로 이동하려고 하면 /about 경로에 있는 파일을 찾는다는 뜻이다.
4. 그러나 SPA 에서는 이런 파일이 존재하지 않으므로 404 오류가 발생한다.

Github Pages는 SPA (Single Page Appliction)를 지원하지 않는다.

 

Link 컴포넌트는 클라이언트 사이드 라우팅을 관리한다. 
*클라이언트 사이드 라우팅: 경로가 바뀌는 경우, 서버에 별다른 요청을 보내지 않고 클라언트의 브라우저 단에서만 여러 페이지를 바꾸며 방문하는 기능

1. Link 를 클릭하면 브라우저는 페이지를 리로드 하지 않는다.
2. 대신 클라이언트 사이드에서 경로를 변경한다.
3. 이럴 경우, 서버에 새로운 요청을 보내지 않으므로 404 오류가 발생하지 않는다.

 

a 태그를 주석으로 처리하고 Link to로 다시 경로를 잡아줬더니 404 에러가 발생하지 않는다.

새로고침을 하니까 404 에러가 뜨긴 하지만...

---

2.1. 출처

1. https://stackoverflow.com/questions/32709655/datagrip-cannot-apply-changes-this-table-is-read-only-cell-editor-changes-cannohttps://codingdiary99.tistory.com/5