기본 파일 세팅

"> on-off

## index.html ##

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/assets/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>on-off</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

## main.jsx ##

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@/styles/main.scss';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

## App.css ##

#root {
  max-width: 1900px;
  margin: 0 auto;
  padding: 0;
}

.app {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

## App.jsx ##

import { Route, Routes, useLocation } from 'react-router-dom';
import { useState } from 'react';
import { PATH } from '@/utils/path';
import UserLayout from '@/layouts/UserLayout';
import PageRoutes from '@/pages';
import '@/App.css';

function App() {
  const location = useLocation();

  return (
    <div className='app'>
      <Routes>
        <Route path='/' element={<UserLayout/>}>
          <Route index element={<PageRoutes.HomePage/>}/>
        </Route>
      </Routes>
    </div>
  )
}

export default App

라우팅 관리

## utils.path.js; PATH 객체를 사용하여 라우팅 경로를 관리 ##

export const PATH = {
    HOME: '/'
}

export const deployHostName = import.meta.env.VITE_DEPLOY_HOSTNAME || '<http://localhost:5173>';

페이지 구조

src/
└── pages/
    ├── HomePage/
    │   ├── HomePage.jsx
    │   └── HomePage.module.scss
    │   └── index.jsx
    └── index.js

## HomePage.jsx ##

import React from 'react';

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

export default HomePage;

## src/pages/HomePage/index.js ##

export { default } from './HomePage';

## src/pages/index.js ##

import HomePage from "./HomePage/HomePage";

const PageRoutes = {
    HomePage
}

export default PageRoutes;