[React] react에서 next처럼 라우팅하기

 

https://github.com/zoubingwu/vite-plugin-next-react-router

GitHub - zoubingwu/vite-plugin-next-react-router: A Next.js style routing vite plugin for react.

 

 

리액트에서도 next와 같은 폴더구조 기반 라우팅을 할 수 있는 플러그인이 있다.

 

 

react-router-dom 기반이기 때문에 아래와 같이 두가지 패키지를 설치해준다.

npm i vite-plugin-next-react-router
npm i react-router-dom

 

 

 

vite.config.js 에 아래와 같은 내용을 추가해준다.

//vite.config.js
import reactRouterPlugin from 'vite-plugin-next-react-router';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    //...
    reactRouterPlugin(),
  ],
});

 

 

main.ts에 아래와 같이 BrowserRouter를 감싸준다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

 

이후 아래와 같이 src파일 안에 pages 파일을 만들면 폴더구조별로 자동으로 라우팅이 된다.