🐛 Bug Report: Route Re-rendering Multiple Times in React Router when opened KeepAlive mode

[cheng4kn]

I'm using React Router as a...

library

Reproduction

❓ What is the issue?

When testing a simple KeepAlive(Just implemented it by DOM visibility) demo with React Router, I encountered unexpected multiple re-renders of route components. This happens both with Data Routers and Declarative Routers. The number of times a component re-renders seems to correspond with the number of open tabs/pages — which is highly unintuitive and seems like a bug.

---

🔁 Reproduction Behavior

• Each time I navigate to a new route (e.g., open a detail page like blogs/:id), it renders once per open tab.
• For example, if I open 3 different blogs/:id pages in tabs, switching between them triggers 3 renders of the current route component.
• I’ve confirmed this by logging console.log('render') inside the component.

---

📹 Evidence (Video or Screenshot)

video_1280.mp4

---

🔍 Steps to Reproduce

1. Setup a minimal React Router demo using either createBrowserRouter or Routes + Route.
2. Create a dynamic route such as /blogs/:id.
3. Open multiple KeepAlive tabs, then navigate between blog details.
4. Add a console.log('render') in the blog detail component.
5. Observe multiple re-renders on a single navigation.

---

🧭 Investigations Done

• Tried both declarative and data routers — same issue.
• Confirmed the behavior in both development and production builds.
• No suspicious side effects or context updates in parent components.
• Ensured no strict mode double renders are involved.

---

🤔 Questions

1. Is this an expected behavior in React Router, or a known limitation with tab-based routing and re-renders?
2. Is there any recommended pattern to prevent redundant re-renders in such cases?
3. Could this be related to caching or reuse strategies within the router context?

---

🧩 Reproduction Repo

• GitHub repo
• CodeSandbox

System Info

System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M2
    Memory: 108.61 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.0 - ~/.nvm/versions/node/v20.19.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.0/bin/npm
    pnpm: 10.8.1 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: 137.0.7151.104
    Safari: 18.5

Used Package Manager

pnpm

✅ Expected Behavior

Each route/component should render only once per navigation (unless something explicitly causes it to re-render).

❌ Actual Behavior

The route re-renders once per open tab, seemingly without state or prop changes.

[timdorr]

Yes, this is expected behavior because each "tab" component is subscribed to the current location: https://github.com/KNFEOE/react-router-issue/blob/main/src/routes/blogs/%5Bid%5D/page.tsx#L8

As you change the page's location, it will cause those prior components to re-render to grab those params and update.