Resolving Routing Issues in Lovable with React Router

Why routing breaks in Lovable React Router projects

Lovable generates single-page applications (SPAs) that use React Router for navigation. Instead of loading a new HTML page for each URL, React Router intercepts navigation and swaps out components on the client side. This gives you fast, smooth transitions — but it also means routing must be configured correctly in your React code. The most common routing issue is using standard HTML anchor tags (<a href="/about">) instead of React Router's Link component. An anchor tag causes a full page reload, which bypasses React Router entirely and can lead to flash-of-blank-content or lost application state. React Router's Link component navigates without reloading the page. Another frequent problem is the route definition structure. React Router v6 (which Lovable uses) requires routes to be defined inside a Routes wrapper component. Each Route specifies a path and the component to render. If routes are defined incorrectly — for example, nesting Route components without an Outlet in the parent — child routes will not render. Lovable's AI sometimes generates routing code that mixes v5 and v6 syntax, leading to confusing errors.

• Using HTML <a> tags instead of React Router's <Link> component for internal navigation
• Missing BrowserRouter wrapper in main.tsx or App.tsx
• Route path definitions that do not match the URLs being navigated to
• Mixing React Router v5 syntax (Switch, component prop) with v6 (Routes, element prop)
• Missing Outlet component in parent routes, causing nested child routes to not render

Error messages you might see

Before you start

• A Lovable project with react-router-dom installed (Lovable adds this by default for multi-page apps)
• At least two page components to navigate between (e.g., Home and About)
• Understanding that Lovable apps are SPAs — all navigation happens on the client side without full page reloads

How to fix it

// main.tsx — missing BrowserRouter
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// main.tsx — BrowserRouter wrapping the app
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// App.tsx — React Router v5 syntax (broken in Lovable)
import { Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
const App = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
);

// App.tsx — React Router v6 syntax (correct for Lovable)
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
const App = () => (
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
);

// Navbar.tsx — using HTML anchors (causes full reload)
const Navbar = () => (
  <nav className="flex gap-4 p-4">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/dashboard">Dashboard</a>
  </nav>
);

// Navbar.tsx — using React Router Link (SPA navigation)
import { Link } from "react-router-dom";
const Navbar = () => (
  <nav className="flex gap-4 p-4">
    <Link to="/" className="hover:underline">Home</Link>
    <Link to="/about" className="hover:underline">About</Link>
    <Link to="/dashboard" className="hover:underline">Dashboard</Link>
  </nav>
);

// LoginForm.tsx — using window.location (breaks SPA)
const handleLogin = async () => {
  await supabase.auth.signInWithPassword({ email, password });
  window.location.href = "/dashboard";
  // Full page reload — loses all React state
};

// LoginForm.tsx — using useNavigate (preserves SPA state)
import { useNavigate } from "react-router-dom";
const LoginForm = () => {
  const navigate = useNavigate();
  const handleLogin = async () => {
    const { error } = await supabase.auth.signInWithPassword({ email, password });
    if (!error) {
      navigate("/dashboard"); // Client-side redirect, no reload
    }
  };
};

Complete code example

1import { Routes, Route } from "react-router-dom";
2import { Toaster } from "@/components/ui/toaster";
3import Navbar from "@/components/Navbar";
4import Home from "@/pages/Home";
5import About from "@/pages/About";
6import Dashboard from "@/pages/Dashboard";
7import NotFound from "@/pages/NotFound";
8
9// Standard Lovable App.tsx with correct React Router v6 routing
10const App = () => {
11  return (
12    <div className="min-h-screen bg-background">
13      {/* Navbar is outside Routes so it appears on every page */}
14      <Navbar />
15
16      {/* All routes defined inside a single Routes wrapper */}
17      <Routes>
18        <Route path="/" element={<Home />} />
19        <Route path="/about" element={<About />} />
20        <Route path="/dashboard" element={<Dashboard />} />
21        {/* Catch-all route for 404 pages */}
22        <Route path="*" element={<NotFound />} />
23      </Routes>
24
25      {/* Toast notifications available on all pages */}
26      <Toaster />
27    </div>
28  );
29};
30
31export default App;

Best practices to prevent this

• Always use Link from react-router-dom for internal navigation — never use HTML <a> tags for links within your app
• Keep BrowserRouter in main.tsx wrapping the entire App component — do not nest multiple BrowserRouter instances
• Use React Router v6 syntax (Routes, Route with element prop) since Lovable installs v6 by default
• Add a catch-all Route with path="*" that renders a NotFound component for unmatched URLs
• Place shared layout components (Navbar, Footer) outside the Routes wrapper so they appear on every page
• Use useNavigate for programmatic redirects after actions like form submissions or login
• For nested routes, use Outlet in the parent layout component to render child route content
• Test navigation by clicking through all links and also by typing URLs directly in the browser address bar

Still stuck?

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

Related error patterns