Consider adding state object to loader

[ewoerner]

Use case: I have an /items route, which should satisfy the following constraints:

• It should show an infinite scrolling list of items
• The number of pages loaded should not be visible in the URL
• The number of pages loaded can differ between two browser tabs
• When navigating away from the /items route, and then navigating back to it, the items route should load as many pages as before
• The scroll position should be restored

Currently, I don't see any way to implement this with the route loader:

• I cannot use localStorage or the URL to save the number of pages displayed, so I need to use the history state object.
• I cannot load the correct number of pages at once in the loader, since the loader only has access to the route params, but not to the history state object
• I could load the first page only using the route loader, and load the remaining number of pages in the route element. In this case, scroll restoration kicks in too early if there is more than one page.

My proposal would be to add the state to the loader parameter object, which would simplify the use case to:

const router = createBrowserRouter([
  {
    element: <ItemsList />,
    path: "items",
    loader: async ({ request, state }) => {
      return myApi.fetchPages(state.pages);
    }
    ...

[sergiodxa]

You can use history.state if you need it at any point.