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

해결 방법

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

---

문제 해결 흐름

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

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>
    );
}

 

주석으로 처리되어 있는  코드를 보면 `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 에러가 뜨긴 하지만...

---

출처

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