add router

eslint.config.js

@@ -42,8 +42,12 @@ export default tseslint.config(
           allowList: {
             props: true,
             prop: true,
+            Props: true,
+            Prop: true,
             ref: true,
             refs: true,
+            Ref: true,
+            Refs: true,
           },
         },
       ],

package.json

@@ -16,12 +16,14 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.5.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",

src/app.tsx

@@ -1,7 +1,13 @@
+import { BrowserRouter } from 'react-router-dom';
 import './app.css';
+import { Router } from './router';
 
 function App() {
-  return <>Hello World</>;
+  return (
+    <BrowserRouter>
+      <Router />
+    </BrowserRouter>
+  );
 }
 
 export default App;

src/lib/layouts/main/index.tsx

@@ -0,0 +1,18 @@
+import { Link, Outlet } from 'react-router-dom';
+
+export const MainLayout: React.FC = () => {
+  return (
+    <div className="main-layout">
+      <header>
+        <nav role="navigation" aria-label="Main navigation">
+          <Link to="/">Home</Link>
+          <span aria-hidden="true"> | </span>
+          <Link to="about">About</Link>
+        </nav>
+      </header>
+      <main role="main">
+        <Outlet />
+      </main>
+    </div>
+  );
+};

src/lib/layouts/main/main.test.tsx

@@ -0,0 +1,48 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  createBrowserRouter,
+  RouterProvider,
+  type RouteObject,
+} from 'react-router-dom';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { HomePage } from '../../../pages/home/index.tsx';
+import { MainLayout } from './index.tsx';
+
+const mockRoutes: RouteObject[] = [
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      { index: true, element: <HomePage /> },
+      {
+        path: 'about',
+        element: <div>About Page</div>,
+      },
+    ],
+  },
+];
+let user: ReturnType<typeof userEvent.setup>;
+
+describe('MainLayout with Router', () => {
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  test('renders layout with Home route', async () => {
+    const router = createBrowserRouter(mockRoutes);
+    render(<RouterProvider router={router} />);
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('About')).toBeInTheDocument();
+    expect(screen.getByText('Home Page')).toBeInTheDocument();
+
+    // Navigate to About page
+    const aboutLink = screen.getByRole('link', { name: 'About' });
+    await act(async () => {
+      await user.click(aboutLink);
+    });
+    expect(screen.getByText('About Page')).toBeInTheDocument();
+    expect(screen.queryByText('Home Page')).not.toBeInTheDocument();
+  });
+});

src/pages/errors/not-found.tsx

@@ -0,0 +1,3 @@
+export function NotFound() {
+  return <div>not-found</div>;
+}

src/pages/home/home.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { HomePage } from './index.tsx';
+
+describe('HomePage', () => {
+  test('renders successfully', () => {
+    render(<HomePage />);
+    expect(screen.getByText('Home Page')).toBeInTheDocument();
+  });
+});

src/pages/home/index.tsx

@@ -0,0 +1,5 @@
+import './home.css';
+
+export function HomePage() {
+  return <>Home Page</>;
+}

src/router/index.tsx

@@ -0,0 +1,19 @@
+import { Route, Routes } from 'react-router-dom';
+import { MainLayout } from '../lib/layouts/main';
+import { NotFound } from '../pages/errors/not-found';
+import { HomePage } from '../pages/home';
+
+export function Router() {
+  return (
+    <Routes>
+      <Route path="/" element={<MainLayout />}>
+        <Route index element={<HomePage />} />
+        <Route path="about" element={<div>About Page</div>} />
+      </Route>
+
+      <Route path="auth" element={<div>Auth Page</div>} />
+
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+}

tsconfig.app.json

@@ -24,5 +24,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "vitest.setup.ts"]
 }

vite.config.ts

@@ -8,5 +8,6 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
   },
 });