리액트 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기

리액트 전체 링크

 

참고

- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기

- 리액트 라우터 react router (최신 node ver)

 

- Netlify로 리액트 프로젝트 배포하기
- Netlify로 배포된 프로젝트에 리액트 라우터 적용하기
- Netlify 배포 에러 해결하기

 

Netlify도 깃허브 페이지와 마찬가지로 라우터 설정을 해야 한다.

그렇지 않으면 라우터 페이지에서 새로고침을 할 경우, Page Not Found를 만나게 된다.

---

라우터 설정

 

먼저 react-router-dom을 설치해서 라우터를 구현해 보자.

 npm install react-router-dom

 

링크를 참고하여 라우터를 설정하자.

 

코드가 완성되면 원격으로 push 한다.

 

Netlify는 깃허브 페이지와는 다르게 push를 하면 자동으로 배포된다.

(Production: master@cafe384 아래의 router는 commit message)

 

정상적으로 빌드가 되면 Published로 변경된다.

---

_redirects 파일 추가하기

 

Netlify의 라우터 설정은 매우 간단하다.

public 폴더 아래에 _rediects 파일을 만들어서 아래의 내용을 추가하면 된다.

/* /index.html 200

 

다시 원격에 push라고 아무 라우터에 이동한 후, 새로고침을 해보자.

정상적으로 페이지가 로딩된다.