npm install react-router-dom
function App() {
return (
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="/"
element={<Navigate to="/gallery" />}
/>
<Route path="/gallery"
element={<Gallery />} />
<Route path="/editor/:imageId"
element={<Editor />} />
<Route path="/settings"
element={<Settings />} />
<Route path="*"
element={<NotFound />} />
</Route>
</Routes>
</BrowserRouter>
);
}
function Layout() {
return (
<div className="flex h-screen">
<nav className="w-14 bg-slate-900
flex flex-col items-center py-4 gap-2">
<Link to="/gallery"
className="...">🖼️</Link>
<Link to="/editor"
className="...">🎨</Link>
<Link to="/settings"
className="...">⚙️</Link>
</nav>
<main className="flex-1">
<Outlet />
{/* Child route renders here */}
</main>
</div>
);
}
// Image deep linking:
function Editor() {
const { imageId } = useParams();
// Load image by ID
}
// Programmatic navigation:
const navigate = useNavigate();
const openImage = (id) =>
navigate(`/editor/${id}`);
const Editor = React.lazy(
() => import('./pages/Editor')
);
<Suspense fallback={<LoadingSpinner />}>
<Route path="/editor/:imageId"
element={<Editor />} />
</Suspense>
git switch -c feature/PIXELCRAFT-040-routing
git add src/
git commit -m "Add React Router with gallery, editor, settings pages (PIXELCRAFT-040)"
git push origin feature/PIXELCRAFT-040-routing
# PR → Review → Merge → Close ticket ✅
Routing maps URLs to code.
Routing is a universal dispatch pattern: receive a request → determine the handler → execute.