Thinking In Web State With React Router 7
Remix is Dead, Long Live Remix!
URL As State
State can be stored and accessed in the URL via the path or query params.
To illustrate the URL as a form of state I'm using <Outlet /> to render this "URL as State" section, as well as the other two sections in this blog post. Because each section is tied to a path, you can use the browser's back button or <Link>. No need to wire up some complicated state system to give the user that feature.
Query params allow for more complex behavior without navigating away from a particular path. State is still stored in the URL, but now the page is a bit more dynamic.
Here's a list of 100 candies from around the world. Both pagination and filtering happens via url query params. The list of candies is a JSON object hard coded to the page, so no database queries.
Snickers
United StatesA chocolate bar with nougat, caramel, and peanuts covered in milk chocolate.
Mars Bar
United KingdomA classic bar of nougat and caramel enrobed in milk chocolate.
Twix
United KingdomCrisp biscuit fingers topped with caramel and coated in chocolate.
Kit Kat
United KingdomCrisp wafer fingers covered in chocolate and made to be snapped and shared.
Milky Way (US)
United StatesA fluffy nougat center layered with caramel and coated in chocolate.
In React Router, changing the query string is a client side navigation, not a full page reload. On query changes, React Router:
- Updates browser history
- Resets scroll behavior by default
- Revalidates loaders (more on this in the "Server as State" section)