Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

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

// ── Pages ──────────────────────────────────────────────────────────────────
function Home()    { return <h1>Home</h1>; }
function About()   { return <h1>About</h1>; }
function NotFound(){ return <h1>404 – Not Found</h1>; }

// ── Layout with shared navigation ─────────────────────────────────────────
function Layout() {
    return (
        <>
            <nav>
                <Link to="/">Home</Link>{' | '}
                <Link to="/about">About</Link>{' | '}
                <Link to="/users">Users</Link>
            </nav>
            <main>
                <Outlet /> {/* child routes render here */}
            </main>
        </>
    );
}

// ── Route tree ─────────────────────────────────────────────────────────────
export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<Home />} />
                    <Route path="about" element={<About />} />
                    <Route path="users" element={<UserList />} />
                    <Route path="users/:id" element={<UserDetail />} />
                    <Route path="*" element={<NotFound />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}