React: Routing and Hooks

package.json

@@ -17,8 +17,10 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-query": "^5.84.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router": "^7.7.1",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {

src/App.test.tsx

@@ -1,26 +1,21 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { RouterProvider, createMemoryRouter } from 'react-router';
 import { describe, it, expect } from 'vitest';
-import App from './App';
-import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { routes } from '@/app/routes';
 import { UI_STRINGS } from '@/shared/constants/ui-strings';
 
 describe('App component', () => {
-  it('renders components', () => {
-    render(<App />);
-    expect(screen.getByText(UI_STRINGS.title)).toBeInTheDocument();
-  });
-
-  it('throw the error with the button', () => {
-    render(
-      <ErrorBoundary fallback={<div>App down</div>}>
-        <App />
-      </ErrorBoundary>,
-    );
+  it('renders ErrorLayout with Header and NotFoundPage', async () => {
+    const testRouter = createMemoryRouter(routes, {
+      initialEntries: ['/error'],
+    });
 
-    const errorButton = screen.getByText(UI_STRINGS.errorButton);
+    render(<RouterProvider router={testRouter} />);
 
-    fireEvent.click(errorButton);
+    expect(await screen.findByAltText(UI_STRINGS.altLogo)).toBeInTheDocument();
 
-    expect(screen.getByText(/App down/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: UI_STRINGS.title }),
+    ).toBeInTheDocument();
   });
 });

src/App.tsx

@@ -1,34 +1,23 @@
-import { Component, type ReactNode } from 'react';
-import Footer from '@/components/Footer';
-import Header from '@/components/Header';
-import { HomePage } from '@/pages/HomePage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import { routes } from '@/app/routes';
 
-type AppState = {
-  wouldThrow: boolean;
-};
+const router = createBrowserRouter(routes);
 
-class App extends Component {
-  state: AppState = {
-    wouldThrow: false,
-  };
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 2 * 60 * 1000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
-  render(): ReactNode {
-    const { wouldThrow } = this.state;
-
-    if (wouldThrow) {
-      throw new Error('test error from button');
-    }
-
-    return (
-      <div className="flex min-h-screen bg-white">
-        <div className="w-full max-w-7xl flex flex-col bg-gray-100 mx-auto">
-          <Header />
-          <HomePage />
-          <Footer onThrowError={() => this.setState({ wouldThrow: true })} />
-        </div>
-      </div>
-    );
-  }
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      );
+    </QueryClientProvider>
+  );
 }
-
-export default App;

src/app/paths.ts

@@ -0,0 +1,6 @@
+export const PATHS = {
+  HOME: '/',
+  ABOUT: '/about',
+  CHARACTER: '/character',
+  NOT_FOUND: '*',
+} as const;

src/app/routes.tsx

@@ -0,0 +1,42 @@
+import { Navigate } from 'react-router';
+import { PATHS } from '@/app/paths';
+import { FallBack } from '@/components/FallBack';
+import { ErrorLayout } from '@/layouts/ErrorLayout';
+import { MainLayout } from '@/layouts/MainLayout';
+import { AboutPage } from '@/pages/AboutPage';
+import { HomePage } from '@/pages/HomePage';
+import { NotFoundPage } from '@/pages/NotFoundPage';
+
+export const routes = [
+  {
+    path: '/',
+    element: <Navigate to={PATHS.CHARACTER} replace />,
+  },
+  {
+    path: '/character',
+    element: <MainLayout />,
+    errorElement: <FallBack />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: ':characterId',
+        element: <HomePage />,
+      },
+    ],
+  },
+  {
+    path: PATHS.ABOUT,
+    element: <MainLayout />,
+    errorElement: <FallBack />,
+    children: [{ index: true, element: <AboutPage /> }],
+  },
+  {
+    path: PATHS.NOT_FOUND,
+    element: <ErrorLayout />,
+    errorElement: <FallBack />,
+    children: [{ path: PATHS.NOT_FOUND, element: <NotFoundPage /> }],
+  },
+];

src/components/Button.tsx

@@ -1,37 +1,35 @@
-import { Component, type ButtonHTMLAttributes } from 'react';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type ButtonProps = {
   variant?: 'default' | 'secondary';
   size?: 'sm' | 'default';
   className?: string;
-}
+  children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
-export class Button extends Component<ButtonProps> {
-  render() {
-    const {
-      variant = 'default',
-      size = 'default',
-      className = '',
-      ...rest
-    } = this.props;
+export const Button = ({
+  variant = 'default',
+  size = 'default',
+  className = '',
+  children,
+  ...rest
+}: ButtonProps) => {
+  let baseClasses =
+    'inline-flex items-center justify-center text-sm transition-colors focus:outline-none focus:ring focus:ring-gray-300 disabled:opacity-50 disabled:pointer-events-none';
 
-    let baseClasses =
-      'inline-flex items-center justify-center text-sm transition-colors focus:outline-none focus:ring focus:ring-gray-300 disabled:opacity-50 disabled:pointer-events-none';
+  let variantClasses =
+    variant === 'secondary'
+      ? 'bg-gray-300 text-gray-800 hover:bg-gray-400'
+      : 'bg-gray-200 hover:bg-gray-400';
 
-    let variantClasses =
-      variant === 'secondary'
-        ? 'bg-gray-300 text-gray-800 hover:bg-gray-400'
-        : 'bg-gray-200 hover:bg-gray-400';
+  let sizeClasses = size === 'sm' ? 'h-8 w-8 px-4' : 'h-9 px-4 min-sm:px-6';
 
-    let sizeClasses = size === 'sm' ? 'h-8 w-8 px-4' : 'h-9 px-4 min-sm:px-6';
-
-    return (
-      <button
-        className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`}
-        {...rest}
-      >
-        {this.props.children}
-      </button>
-    );
-  }
-}
+  return (
+    <button
+      className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};