인프런 커뮤니티 질문&답변

vite-plugin-next-react-router가 업데이트되면서 좀더 편리한 방법으로 바뀌었네요.
https://github.com/zoubingwu/vite-plugin-next-react-router

내용중에 이런게 있습니다.

This plugin will scan your pages folder then automatically inject code to index html, you don't have to write any other code for initial rendering, just like Next.js. There is a example project under /example/react folder.
이 플러그인은 페이지 폴더를 스캔한 다음 자동으로 코드를 삽입하여 html을 인덱싱하므로 Next.js와 마찬가지로 초기 렌더링을 위해 다른 코드를 작성할 필요가 없습니다.

• 현재의 app.tsx 및 main.tsx가 불필요해졌습니다.

• index.html에서

  <script type="module" src="/src/main.tsx"></script>

  부분을 지워주세요.

• app.tsx에 있던 내용 중에 QueryClientProvider 부분은 _layout.tsx로 옮겨주세요.

  const Layout: React.FC = () => {
    const queryClient = getClient()
    return (
      <QueryClientProvider client={queryClient}>
        <Suspense fallback={'loading...'}>
          <Outlet />
        </Suspense>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    )
  }

강사님 설명에 덧붙이자면 _layout.tsx 는

import React, { Suspense } from "react";
import { Outlet } from "react-router-dom";
import { QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { getClient } from "../queryClient";

const Layout: React.FC = () => {
  const queryClient = getClient();
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={"loading..."}>
        <Outlet />
      </Suspense>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default Layout;

이렇습니다. export default 안해서 한참을 헤매다가 이제서야 이유를 알았습니다....

아 그리고 app.tsx main.tsx 는 완전히 지워도 작동 합니다.

_layout.tsx 위치는 아래와 같습니다.

vite. config.ts 는 이전설정으로 바꾸지 않아도 작동 합니다.

혹시 route.tsx 직접 작성하셨나요 ㅠㅠ 저도 파일이 생성이 되지 않네요..