routing-state

# Routing & State ## Overview Where state lives decides whether a view is deep-linkable and refresh-safe. The recurring defects are navigation-surviving state (a selected tab, a filter) trapped in component state that resets on refresh, and fat route components. **Core principle:** If it should survive a refresh or be shareable by URL, it lives in the URL. ## Rules - **`react-router-dom`** for navigation; URL params carry resource ids so views are deep-linkable and refresh-safe. - **State that survives navigation** (filters, selected tab, search) lives in the URL search params — not component state. - **Lift shared state into a custom hook** when multiple pages need it; avoid a global store for what two components can share via props. - **Route components stay thin:** data loading + layout only; behavior lives in child components and hooks. ## Worked Example ```tsx // ❌ selected filter lost on refresh, not shareable const [status, setStatus] = useState("all"); // ✅ filter in the URL — refresh-safe, shareable, back-button works const [params, setParams] = useSearchParams(); const status = params.get("status") ?? "all"; const setStatus = (s: string) => setParams(prev => { prev.set("status", s); return prev; }); ``` Now `/board?status=in_progress` deep-links to the filtered view and survives a refresh. ## Common Mistakes - A filter/tab in `useState` that resets on refresh and can't be shared. - A global store for state two sibling components could pass via props. - A ...