[React] 배포한 페이지가 router 인식을 못할 때

CRA(Create React App)를 사용한 프로젝트를 배포해보니, 화면에 아무것도 나오지 않았다.
에러가 뜨는 것도 아니었고, 로컬에서는 잘 나왔는데 원인을 한참 찾다가 보니 react-router 를 사용할 때 발생하는 문제였던 것이다...

처음 구조는 이렇게 구성하였다.

<Router>
  <Routes>
    <Route path='/' element={handleRootPath("/")} />
    <Route path='/signin' element={handleRootPath("/signin")} />
    <Route path='/signup' element={handleRootPath("/signup")} />
    <Route path='/todo' element={handleRootPath("/todo")} />
  </Routes>
</Router>

• 라우터가 가리키는 '/' 경로는 내가 배포한 주소(https://도메인/)이다.
• 하지만 내가 설정해준 경로는 '/signin/' 으로 이동하기 때문에 제대로 동작되지 않은 것 같다.

-> 라우터로 이동할 경우 '/'를 기준으로 이동하는 것이 아닌 '/sigin/'을 기준으로 이동하도록 수정해주어야 한다.

💡 해결 방법

1. HashRouter 사용

• url에 hash(#)이 들어간다.
• 라우저가 route에 대한 정보를 서버에 보내지 않는다는 장점이 있다.
• 정적인 페이지가 목적이라면 사용하기에 충분하다.
• 하지만 SEO에 좋지 못하기 때문에 가능하면 BrowerRouter를 사용하자.

2. BrowerRouter 사용

• BrowerRouter 에 basename 속성을 추가하는 것이다.
• 이 방법은 프로젝트의 기본 URL 경로를 설정하는 데 사용된다.

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Routes>
  	<Route path='/' element={handleRootPath("/")} />
  	<Route path='/signin' element={handleRootPath("/signin")} />
  	<Route path='/signup' element={handleRootPath("/signup")} />
  	<Route path='/todo' element={handleRootPath("/todo")} />
  </Routes>
</BrowserRouter>

• 위 코드로 수정하여 배포했을 때, 라우팅 되는 것을 확인하였다.
• 처음에는 Router 컴포넌트를 사용하였는데, BrowserRouter와 유사하게 동작하지만, basename 속성은 지원하지 않는다고 한다.

Router와 BrowserRouter

주요 차이점 중 하나는 URL 경로에 대한 처리 이다.
BrowserRouter는 HTML5 History API를 사용하여 브라우저 주소 표시줄과 연결하므로, 서버도 실제 경로를 인식하고 처리해야 한다.
반면에 Router는 브라우저 주소 표시줄과 직접적인 연결이 없으므로 서버 측에서의 설정이 더 필요할 수 있다.

• 서버 설정 확인 :
  Router를 사용할 경우, 서버 측에서 모든 경로에 대해 애플리케이션의 진입점 (일반적으로 index.html)을 제공해야 한다. 서버는 해당 경로로 요청이 들어왔을 때 항상 같은 index.html 파일을 반환하도록 설정되어야 한다.
• 배포 경로 설정 :
  프로젝트가 서브 디렉토리에서 호스팅되는 경우 (예:http://example.com/myapp), basename을 설정하여 올바른 경로로 라우팅되도록 도움을 줄 수 있다.

🔚 결론

1. BrowserRouter는 실제 웹 애플리케이션에서 사용되며, URL 경로와 브라우저 주소 표시줄의 URL을 연결하여 라우팅을 처리한다.
2. Router는 사용자가 링크를 클릭하거나 주소를 직접 입력할 때 브라우저 주소 표시줄의 URL이 자동으로 변경되지 않는다.

📑 참고

https://medium.com/@_diana_lee/react-react-router-%EC%A0%81%EC%9A%A9%ED%95%9C-react-%EC%95%B1%EC%9D%84-github-pages%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EB%8A%94-%EB%B2%95-5f6119c6a5d9