Using Dynamic Routes in Lovable Without Errors

Why dynamic routes fail or show blank pages in Lovable

Dynamic routes let you use URL parameters (like /products/42 or /blog/my-first-post) to load different content from the same page component. Lovable projects use React Router with BrowserRouter, which handles dynamic segments via the :param syntax. The most common failure is a missing Route definition. Your page component exists and uses useParams to read the ID, but App.tsx does not have a Route entry with the :param segment. React Router does not know this path exists, so it falls through to a catch-all or shows a blank page. Another frequent issue is not handling invalid parameters. When someone visits /users/abc and your code expects a numeric ID, the Supabase query returns no results but the component tries to render the data anyway, causing 'cannot read property of undefined' errors. Always validate the parameter and show a 404 state when the data does not exist. Finally, dynamic routes that work in Lovable's preview may break on deployed hosts (Vercel, Netlify) because the server does not know about /users/42 — it only knows about /index.html. This is the SPA routing fallback issue, covered in detail on our SPA fallback configuration page.

• Missing Route definition in App.tsx — the path with :param is not registered in the router
• useParams returns undefined — the component is rendered outside a Route or the param name does not match
• No loading state — the component renders before the data fetch completes, causing undefined errors
• Invalid parameter not handled — visiting /users/abc when only numeric IDs exist produces a broken page
• SPA fallback not configured on the hosting platform — direct URL access returns a server 404

Error messages you might see

Before you start

• A Lovable project with React Router configured (this is the default for all Lovable projects)
• A page component that should display data based on a URL parameter
• A data source (Supabase table or API) that the component will query using the URL parameter

How to fix it

<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/users" element={<UserList />} />
</Routes>

<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/users" element={<UserList />} />
  <Route path="/users/:id" element={<UserProfile />} />
  <Route path="*" element={<NotFound />} />
</Routes>

function UserProfile() {
  // No parameter reading — hardcoded user ID
  const [user, setUser] = useState(null);
  useEffect(() => {
    supabase.from("users").select("*").eq("id", 1).single();
  }, []);
  return <div>{user?.name}</div>;
}

import { useParams } from "react-router-dom";
function UserProfile() {
  const { id } = useParams<{ id: string }>();
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    if (!id) return;
    supabase
      .from("users")
      .select("*")
      .eq("id", id)
      .single()
      .then(({ data, error }) => {
        if (!error) setUser(data);
        setIsLoading(false);
      });
  }, [id]); // Re-fetch when the URL parameter changes
  if (isLoading) return <p>Loading...</p>;
  if (!user) return <p>User not found.</p>;
  return <div>{user.name}</div>;
}

// No validation — crashes on invalid ID
useEffect(() => {
  supabase.from("products").select("*").eq("id", id).single()
    .then(({ data }) => setProduct(data));
}, [id]);

useEffect(() => {
  if (!id) {
    setError("No product ID provided");
    setIsLoading(false);
    return;
  }
  // Validate that the ID looks like a UUID or number
  const isValidId = /^[0-9a-f-]{36}$/.test(id) || /^\d+$/.test(id);
  if (!isValidId) {
    setError("Invalid product ID format");
    setIsLoading(false);
    return;
  }
  supabase
    .from("products")
    .select("*")
    .eq("id", id)
    .single()
    .then(({ data, error }) => {
      if (error || !data) {
        setError("Product not found");
      } else {
        setProduct(data);
      }
      setIsLoading(false);
    });
}, [id]);

<ul>
  {users.map(user => (
    <li key={user.id}>
      <a href={`/users/${user.id}`}>{user.name}</a>
    </li>
  ))}
</ul>

import { Link } from "react-router-dom";
<ul>
  {users.map(user => (
    <li key={user.id}>
      <Link to={`/users/${user.id}`} className="text-primary hover:underline">
        {user.name}
      </Link>
    </li>
  ))}
</ul>

Complete code example

1import { useEffect, useState } from "react";
2import { useParams, Link } from "react-router-dom";
3import { supabase } from "@/integrations/supabase/client";
4
5interface UserData {
6  id: string;
7  name: string;
8  email: string;
9  avatar_url: string | null;
10  created_at: string;
11}
12
13export default function UserProfile() {
14  const { id } = useParams<{ id: string }>();
15  const [user, setUser] = useState<UserData | null>(null);
16  const [isLoading, setIsLoading] = useState(true);
17  const [error, setError] = useState<string | null>(null);
18
19  useEffect(() => {
20    if (!id) {
21      setError("No user ID provided in the URL");
22      setIsLoading(false);
23      return;
24    }
25
26    supabase
27      .from("profiles")
28      .select("id, name, email, avatar_url, created_at")
29      .eq("id", id)
30      .single()
31      .then(({ data, error: dbError }) => {
32        if (dbError || !data) {
33          setError("User not found");
34        } else {
35          setUser(data);
36        }
37        setIsLoading(false);
38      });
39  }, [id]);
40
41  if (isLoading) {
42    return <div className="p-8 text-muted-foreground">Loading profile...</div>;
43  }
44
45  if (error) {
46    return (
47      <div className="p-8 text-center">
48        <h2 className="text-xl font-semibold mb-2">{error}</h2>
49        <Link to="/users" className="text-primary hover:underline">
50          Back to user list
51        </Link>
52      </div>
53    );
54  }
55
56  return (
57    <div className="p-8 max-w-2xl mx-auto">
58      <Link to="/users" className="text-sm text-muted-foreground hover:underline mb-4 block">
59        &larr; All users
60      </Link>
61      <h1 className="text-2xl font-bold mb-4">{user?.name}</h1>
62      <p className="text-muted-foreground">{user?.email}</p>
63    </div>
64  );
65}

Best practices to prevent this

• Always define a catch-all Route (path='*') in App.tsx so unmatched URLs show a proper 404 page instead of a blank screen
• Use useParams with TypeScript generics (useParams<{ id: string }>()) for type safety on parameter names
• Add id to the useEffect dependency array so the component re-fetches when the URL parameter changes
• Validate URL parameters before making database queries — show a not-found state for invalid formats
• Use Link from react-router-dom instead of HTML anchor tags to keep navigation within the SPA
• Always include loading and error states in components that fetch data by URL parameter
• Configure SPA fallback routing on your hosting platform so direct URL access to dynamic routes works after deployment

Still stuck?

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

Related error patterns