URL State Management Pattern
Manage application state in URL search parameters for shareable, bookmarkable pages with type-safe parsing.
What's Included#
- Reusable useUrlState hook for reading and writing URL search parameters
- Typed URL state with Zod schema validation and default values
- Pagination component driven entirely by URL parameters
- Filter interface with search, category, price range, and sort via URL state
- Server Component integration for reading URL params in server-side queries
- Support for array parameters, replace vs push navigation, and clearing filters
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the URL state management pattern from Bootspring"
- "Apply the Bootspring URL state pattern to my project"
Key Considerations#
- Reset pagination to page 1 whenever filters change to avoid empty result pages
- Use router.replace for frequently changing values like search input to avoid polluting history
- Always validate URL parameters on the server since users can manually edit URLs
- Remove empty parameters from the URL to keep URLs clean and readable
- Provide sensible defaults for all parameters so pages work without any query string
Related Patterns#
- Tables - Data tables with URL state
- React Query - Cache queries by URL params
- Tabs - URL-synced tabs