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

// ❌ 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 route component packed with behavior instead of delegating to children/hooks.

Red Flags

• A shareable view state that isn't in the URL.
• A new global store for a two-component concern.
• A route component you scroll to read.