[오류] Vercel 배포 시 404: NOT_FOUND react-router 관련 에러 해결 (feat. React, Vite)

문제

Vite로 생성한 React 프로젝트를 개발하는 과정에서 나는 react-router-dom 라이브러리를 활용해서 라우팅을 진행했다.

import { Route, Routes } from "react-router-dom";
import TreeBranchView from "./pages/TreeBranchView";
import MemberBranchView from "./pages/MemberBranchView";

function App() {
    return (
        <Routes>
            <Route
                path="/branchView/tree/:treeId"
                element={<TreeBranchView />}
            />
            <Route
                path="/branchView/member/:memberId"
                element={<MemberBranchView />}
            />
        </Routes>
    );
}

export default App;

 

코드를 모두 작성하고 Vercel 로 배포한 후 배포된 주소로 접속하는데

분명 로컬에서는 잘 라우팅 되어 접속되었던 주소가, Vercel로 배포한 주소로 들어갔을 때에는

404: NOT_FOUNT 에러가 뜨는 것이었다.

 

해결 방법

아래의 링크를 참고했다.

ref: https://stackoverflow.com/questions/64815012/why-does-react-router-not-works-at-vercel/65644138#65644138

 

방법은 프로젝트의 root 경로에, 즉 package.json 과 나란히 vercel.json 이라는 파일을 생성한 후

다음과 같이 파일을 작성해준다.

{
  "routes": [
    { "src": "/[^.]+", "dest": "/", "status": 200 }
  ]
}

 

그리고 다시 Vercel로 배포된 주소를 들어가보니 라우팅한대로 잘 접속되는 것을 확인할 수 있었다.