react-router-remix-setup

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

state-in-url — React Router and Remix

The hook signature, return shape, and behavior of useUrlState are identical across React Router v6, v7, and Remix v2. Three things differ:

Aspect	Difference
Import path	state-in-url/react-router (v7), state-in-url/react-router6 (v6), state-in-url/remix (Remix v2)
setUrl per-call options	Accepts NavigateOptions from react-router (e.g. preventScrollReset, state, replace)
SSR	Remix v2 routes can hydrate from loader data; React Router CSR-only by default

Setup

React Router v7

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

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

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

React Router v6 (since state-in-url 6.0.0)

// Note the /react-router6 subpath
import { useUrlState } from 'state-in-url/react-router6';

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

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

Remix v2

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

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

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

Core Patterns

Pass NavigateOptions per call

setUrl({ tab: 'b' }, { replace: false, preventScrollReset: true });