Adding Custom Routes in Lovable Without Breaking Navigation

Why adding new routes breaks existing navigation in Lovable

Lovable projects use React Router where route order matters. When you add a new route, it can intercept URLs meant for existing routes if the path pattern is too broad. For example, adding a route for /:anything before /dashboard means React Router matches /dashboard to the /:anything pattern instead of the specific /dashboard route. Another common issue is forgetting to update navigation components. You add the route and page component, but the sidebar or navbar still does not show a link to the new page. Users can only reach it by typing the URL directly. Protected routes add another layer. If the new page requires authentication but you do not wrap it in a route guard, unauthenticated users see broken or empty pages instead of being redirected to the login page.

• Route placed after the wildcard (*) catch-all — React Router never reaches it because * matches everything
• Broad path pattern intercepts existing routes — /:param matches /dashboard before the specific route can
• Navigation component not updated — no link to the new page exists in the sidebar or navbar
• Missing route guard — the new page requires auth but renders without checking session state
• Duplicate path definition — two routes with the same path cause unpredictable behavior

Error messages you might see

Before you start

• A Lovable project with React Router already configured (default for all Lovable projects)
• The page component you want to add (or you will create one)
• An understanding of which existing routes should be protected and which are public

How to fix it

1// src/pages/Pricing.tsx
2export default function Pricing() {
3  return (
4    <div className="container mx-auto p-8">
5      <h1 className="text-3xl font-bold mb-6">Pricing</h1>
6      <p className="text-muted-foreground">Choose the plan that works for you.</p>
7    </div>
8  );
9}

<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="*" element={<NotFound />} />
</Routes>

import Pricing from "./pages/Pricing";
<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/pricing" element={<Pricing />} />
  {/* Catch-all must be last */}
  <Route path="*" element={<NotFound />} />
</Routes>

<Route path="/settings" element={<Settings />} />

<Route
  path="/settings"
  element={
    <ProtectedRoute>
      <Settings />
    </ProtectedRoute>
  }
/>

<nav>
  <NavLink to="/" className={navLinkClass}>Home</NavLink>
  <NavLink to="/dashboard" className={navLinkClass}>Dashboard</NavLink>
</nav>

import { NavLink } from "react-router-dom";
<nav>
  <NavLink to="/" className={({ isActive }) => isActive ? "text-primary font-bold" : "text-muted-foreground"}>Home</NavLink>
  <NavLink to="/dashboard" className={({ isActive }) => isActive ? "text-primary font-bold" : "text-muted-foreground"}>Dashboard</NavLink>
  <NavLink to="/pricing" className={({ isActive }) => isActive ? "text-primary font-bold" : "text-muted-foreground"}>Pricing</NavLink>
</nav>

Complete code example

1import { BrowserRouter, Routes, Route } from "react-router-dom";
2import { AuthProvider } from "@/contexts/AuthContext";
3import ProtectedRoute from "@/components/ProtectedRoute";
4import Layout from "@/components/Layout";
5import Index from "@/pages/Index";
6import Login from "@/pages/Login";
7import Dashboard from "@/pages/Dashboard";
8import Pricing from "@/pages/Pricing";
9import Settings from "@/pages/Settings";
10import NotFound from "@/pages/NotFound";
11
12export default function App() {
13  return (
14    <AuthProvider>
15      <BrowserRouter>
16        <Routes>
17          {/* Public routes */}
18          <Route path="/" element={<Index />} />
19          <Route path="/login" element={<Login />} />
20          <Route path="/pricing" element={<Pricing />} />
21
22          {/* Protected routes — require authentication */}
23          <Route element={<Layout />}>
24            <Route
25              path="/dashboard"
26              element={
27                <ProtectedRoute>
28                  <Dashboard />
29                </ProtectedRoute>
30              }
31            />
32            <Route
33              path="/settings"
34              element={
35                <ProtectedRoute>
36                  <Settings />
37                </ProtectedRoute>
38              }
39            />
40          </Route>
41
42          {/* Catch-all for undefined routes — must be last */}
43          <Route path="*" element={<NotFound />} />
44        </Routes>
45      </BrowserRouter>
46    </AuthProvider>
47  );
48}

Best practices to prevent this

• Always place the catch-all Route (path='*') as the last Route inside your Routes component
• Put specific paths (/dashboard) before pattern paths (/:id) to prevent interception
• Use NavLink instead of Link for navigation items — it provides automatic active state detection
• Wrap all authenticated pages in a ProtectedRoute component that checks for a valid session
• Group related routes under a shared Layout route using Outlet for consistent page structure
• Update your AGENTS.md when you add new routes so Lovable knows about the routing structure in future sessions
• Test new routes by typing the URL directly in the browser — not just by clicking links — to verify SPA fallback works

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns