react-no-router

This skill builds on state-in-url/feature-state-hook. Read it first for the module-scoped default-state rule.

state-in-url — plain React, no router

A Vite or CRA app with no router uses state-in-url/react. It is a full useUrlState with the same API as every other entry point; it writes the URL through window.history because there is no router to navigate with.

import { useUrlState } from 'state-in-url/react';

Do not add a router to get a different import, and do not hand-compose useUrlStateBase for this — that is only for a router with no entry point of its own.

Setup

// useFilters.ts
import { useUrlState } from 'state-in-url/react';

type FiltersState = { sort: 'name' | 'date'; page: number };
const FILTERS_STATE: FiltersState = { sort: 'name', page: 1 };

export function useFilters() {
  return useUrlState(FILTERS_STATE);
}

// FiltersBar.tsx
import { useFilters } from './useFilters';

export function FiltersBar() {
  const { urlState, setUrl } = useFilters();
  return <button onClick={() => setUrl({ page: urlState.page + 1 })}>Next</button>;
}

setUrl defaults to replace; pass { replace: false } to push a history entry instead.

Core Patterns

Share state without passing it down

State is keyed by the identity of the default-state object, so every component calling a hook built on the same module-scoped constant reads and writes one entry and re-renders together. No provider, no props.

function Controls() {
  const { setUrl } = useFilters();
  return <button onClick={() => setUrl({ sort: 'date' })}>By date</button>;
}

function Results() {
  const { urlState } = useFilters();
  return <List sort={urlState.sort} />;
}

This is the reason the default state must be a module-scoped const — see feature-state-hook.

A router with no entry point of its own

For TanStack Router, wouter, or a custom history, build the hook with useUrlStateBase and a memoized object carrying push and replace.