How to add a route

A goal-oriented guide for adding a new top-level route to Unwrap.

Before you start

Decide whether your route should be:

• Public — accessible without authentication (e.g. /login).
• Protected — requires authentication (e.g. /dashboard, /settings).

This decides whether you wrap the route in <ProtectedRoute>.

1. Create the page component

Page components live in src/pages/. Create your file alongside the others:

// src/pages/Stats.tsx
import styles from './Stats.module.css';

export default function Stats() {
  return (
    <main className={styles.page}>
      <h1>Stats</h1>
      {/* ... */}
    </main>
  );
}

2. Register the route in App.tsx

Open src/App.tsx (or wherever your <Routes> block lives) and add a new <Route>:

import Stats from '@/pages/Stats';

// inside <Routes>:
<Route
  path="/stats"
  element={
    <ProtectedRoute>
      <Stats />
    </ProtectedRoute>
  }
/>;

For a public route, drop the <ProtectedRoute> wrapper.

3. Add navigation to it

Routes that aren't reachable from the UI are dead routes. Add a link wherever it belongs, usually in the header, a sidebar, or a related page. Use React Router's <Link> or <NavLink>. Avoid a raw <a> (which causes a full page reload):

import { Link } from 'react-router-dom';

<Link to="/stats">Stats</Link>;

To add a route to the navigation bar, add it to the navItems array in Navigation.tsx:

const navItems = [
  ...
  { to: '/stats', label: 'Stats', icon: '⚖' }
  ...
];

4. Add a test (optional but encouraged)

A minimal smoke test that the route renders for an authenticated user:

// src/__tests__/pages/Stats/Stats.test.tsx
import { renderWithProviders } from '@/test/renderWithProviders';
import { screen } from '@testing-library/react';
import Stats from '@/pages/Stats';

describe('Stats page', () => {
  it('renders the heading', () => {
    renderWithProviders(<Stats />);
    expect(screen.getByRole('heading', { name: /stats/i })).toBeInTheDocument();
  });
});

Done

The new route is live at /stats and protected (or public) per your choice. Navigate to it via the link you added.