[v2] avoid recreating browser router on every app render

[nischal-shetty2]

right now createBrowserRouter() is being called inside the App component body, which means a new router instance gets created on every render.

since App re-renders on state, context, and translation changes, this causes the router to be recreated repeatedly. react router expects the router instance to be stable, and recreating it can reset internal navigation state, interrupt pending fetchers, and potentially cause subtle routing bugs.

the router should be memoized with the correct dependencies or refactored so it is created once and remains stable across renders.

[Priyanshubhartistm]

Hi @nischal-shetty2 ,
I would like to work on this issue #1155 - avoid recreating browser router on every app render.
I understand the problem: createBrowserRouter() is being called on every render of the App component, which is causing unnecessary router recreation and potential bugs.
I have experience with React Router and useMemo. I can fix this by memoizing the router creation properly.
Could you please assign this issue to me? I’ll start working on it and open a PR soon.
Thanks!