router icon indicating copy to clipboard operation
router copied to clipboard

Default Browser History re render entire root route when URL hash changes

Open gbbrambila opened this issue 7 months ago • 2 comments

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

  1. Open the provided demo link
  2. Open the demo in full-screen preview mode
  3. Open browser dev tools, (make sure you have react dev tools installed and option Highlight updates when components render selected)
  4. Click on the app button "Simulate Map Drag Controls"
  5. 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

gbbrambila avatar Jul 20 '24 09:07 gbbrambila