router
router copied to clipboard
Default Browser History re render entire root route when URL hash changes
Describe the bug
I’m using the default history-type router to render my app pages: createBrowserHistory
However, I’m using a 3rd party component (map component) that uses the location.hash
to store some estate data. The information that this component stores in the URL hash, is Lat/Long/Bearing etc... Useful when users share the full URL to other users to load exactly the same map location.
The issue is that every time the Map Component changes the URL hash, the entire root route tree of my app reloads.
I tried to memo the underlying components, but since the root route re-renders, I didn't get the expected result.
Here's the link to the demo I have created: https://stackblitz.com/edit/vitejs-vite-ccsdz2?file=src%2Froutes%2F__root.tsx
Since the current implementation of the router does not ignore hash in browser history as it can be a valid part for the history.
Would it be a good idea to have an optional flag when setting up the route three to ignore hash updates therefore not re-rendering the entire root route?
Thanks in advance.
Your Example Website or App
https://stackblitz.com/edit/vitejs-vite-ccsdz2?file=src%2Froutes%2F__root.tsx
Steps to Reproduce the Bug or Issue
- Open the provided demo link
- Open the demo in full-screen preview mode
- Open browser dev tools, (make sure you have react dev tools installed and option Highlight updates when components render selected)
- Click on the app button "Simulate Map Drag Controls"
- Review the entire root route and components tree re-rendering. the
Expected behavior
Perhaps users should be able to opt to out to re-render on URL hash updates
Screenshots or Videos
No response
Platform
- OS: any
- Browser: any
- Version: latest
Additional context
No response