리액트 라우터 설정 및 경로 alias

린닝·2024년 9월 19일

카카오테크캠퍼스 step3 프로젝트

목록 보기

7/13

라우터 설정 후 HomePage를 띄워놓고 네비게이션 바 등의 컴포넌트들을 제작하고 싶어서 먼저 라우터 설정을 하기로 했다.

1. react-router-dom 설치

npm install react-router-dom
명령어를 입력해 react-router-dom을 설치해준다.

2. 경로 alias 설정

이 과정에서 경로 alias를 재설정했다.

"baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

원래 baseUrl이 ".src/" 로 설정되어 있었는데, import 시 깔끔해 보이도록 간단히 별칭을 설정했다.

3. router 설정

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { RouterPath } from './path';
import { HomePage } from '@/pages/Home';

const router = createBrowserRouter([
  {
    path: RouterPath.home,
    element: <HomePage />,
  },
]);

export const Routes = () => {
  return <RouterProvider router={router} />;
};

export const RouterPath = {
  home: '/',
};

src/router 폴더 내에 index.tsx과 path.ts 파일을 작성해주었다.
경로 관리에 있어서 RouterPath를 별도로 정의하여 각 경로를 상수로 관리해주면, 경로 변경 시 or 새 경로 추가 시에 코드를 쉽게 수정할 수 있다.

우선 HomePage만 뜨게 할 예정이었으므로 다른 경로는 잠시 두고,
루트 경로인 / 부분만 HomePage를 띄우도록 라우터 설정을 해주었다.

export const HomePage = () => {
  return (
    <>
      <h1>HomePage</h1>
    </>
  );
};

홈페이지 코드는 위와 같이 간단하게 작성해주었다. (제대로 나오는지만 확인하기 위해서)

에러 1

이렇게 설정해주었는데 에러가 났다 ㅠ

[plugin:vite:import-analysis] Failed to resolve import "@/pages/Home" from "src/routes/index.tsx". Does the file exist?

에러 메시지를 확인해보니 말 그대로 라우터 설정 파일의 HomePage import문에서 파일을 찾지 못하고 있는 것으로 보였다.
경로 별칭 설정도 다시 확인해보고 import 시에도 import { HomePage } from '@/pages/Home'; 이렇게 올바르게 잘 했는데 뭐가 문제지 ㅠㅠ 싶어서 GPT에게 도움을 청했다..

원인은 바로 Vite가 Typescript의 paths 설정을 인식하지 못해서 생긴 문제였다.
Vite는 tsconfig.json에서 정의된 경로 별칭을 자동으로 지원해주지 않아 따로 vite-tsconfig-paths 플러그인을 설치하고 설정해줘야 했던 것이다.

설치 후 vite.config.ts 파일에서

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

이와 같이 방금 설치해준 플러그인을 설정 파일에 추가해주었다. 이렇게 설정해주면 Vite가 tsconfig.json에서 설정한 경로 별칭을 인식할 수 있게 된다.

에러 2

그런데 또 에러파티

"vite-tsconfig-paths" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

에러 메시지를 읽어보니 이 문제는 방금 설치하고 설정해준 vite-tsconfig-paths 플러그인이 ES 모듈(ESM)로 제공되는데 현재 Vite 설정은 CommonJS 방식으로 플러그인을 불러오려고 해서 발생한 문제였다.