import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h1>🏠 Home Page</h1>;
}
function About() {
  return <h1>ℹ️ About Page</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        {/* Absolute paths start with / */}
        <Link to="/about">Go to About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";

function Layout() {
  return (
    <div>
      <h1>🏠 Home Layout</h1>
      <nav>
        {/* ✅ Relative path navigation */}
        <Link to="dashboard">Go to Dashboard</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>📊 Dashboard</h2>
      <nav>
        {/* ✅ Relative path (no leading /) */}
        <Link to="stats">Go to Stats</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Stats() {
  return <h3>📈 Dashboard Stats</h3>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Root route */}
        <Route path="/" element={<Layout />}>
          {/* Nested relative route */}
          <Route path="dashboard" element={<Dashboard />}>
            <Route path="stats" element={<Stats />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}