Duplicate router created when Routes is rerendered

[ethanwu10]

Describe the Bug

In the fix for #180, the browser router was changed to being created during each render of the Routes component:

generouted/packages/generouted/src/react-router.tsx

Lines 49 to 50 in 567a352

	const router = () => createBrowserRouter(routes)
	export const Routes = () => <RouterProvider router={router()} />

Thus, each time the Routes component was rendered, a completely new router is created and used.

This causes the same issues with e.g. loaders firing multiple times as seen in #180, but instead when using the Routes component (and not when creating your own Router).

Generouted Version

1.19.7

Your Example Website or App or Reproduction

https://stackblitz.com/edit/sb1-1ln2g2?file=src%2Fpages%2Findex.tsx

Steps to Reproduce the Bug or Issue

1. Navigate using a link
2. Navigate back using browser buttons
3. Observe that the loader count went up by 2 and that in the console, the loader fired twice in a row for the same navigation

Note that since StrictMode is enabled, all render functions are called twice per render - thus 2 routers are created and we see loaders firing twice. If the component containing <Routes /> rerenders for any other reason, more routers will be created.

Expected Behavior

The loader should only have been executed once

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Firefox 131

Additional context

No response

[oedotme]

Fixed in v1.19.8 — Thanks for the follow up and for your contributions!