tajo / react-titled

πŸ“ƒ Set document.title with ease. Nested. Flexible.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Title doesn't update in some situations with react-router

adibsaad opened this issue Β· comments

Hello,
Thank you for making this library. It is much-needed! πŸ˜„

I was trying to use this in my app with react-router, but I'm running into a bug where the title doesn't get updated when navigating from a child route to parent route or from a route with a Titled to a route without one.

Code: https://codesandbox.io/p/sandbox/snowy-cloud-x9z7lq
Demo: https://x9z7lq-5173.csb.app/

To replicate the first issue:

  • Click path2-1 and observe the document title is path2-1 - path2 - Top
  • Click path2. I expect the title to be path2 - Top but it hasn't changed

To replicate the second issue

  • Click path1 and observe the document title is path1 - Top
  • Click path3. I expect the title to be Top but it hasn't changed

Worth noting: if I make separate components and use them for the route element, the bug still exists https://codesandbox.io/p/sandbox/charming-thunder-jxh8zg

I can confirm this is happening. I tried downgrading to version 1.1.1 -- same issue. Really strange. I remember testing something similar before adopting the library and didn't encounter this.

From testing, I believe this is because RRv6 tries to prevent rerenders as much as possible, whereas this library only reconciles document.title on render.

If I add a useLocation hook to my component for example, the title updates correctly.