Navigation fails due to missing manifest (fog of war enabled)

[elledienne]

Reproduction

In our codebase we have the following (buggy) component

function TabsView() {
  const navigate = useNavigate();
  const location = useLocation();

  const activeTab = location.pathname.includes("/archived") ? tabNames.archived : tabNames.active;
  const tabIndex = tabs.findIndex((tab) => tab.label === activeTab);

  function handleTabsChange(index: number) {
    const tab = tabs[index]?.label;
    invariant(tab, `Invalid tab index: ${index}`);

    const pathname = tab === tabNames.active ? "/conversations" : "/conversations/archived";
    navigate(pathname);
  }

  return (
    <Tabs index={tabIndex} onChange={handleTabsChange}>
      <TabList>
        {tabs.map((tab) => (
          <Tab key={tab.label}>
            {tab.name}
          </Tab>
        ))}
      </TabList>
    </Tabs>
  );
}

When a Tab is clicked, onChange fires and causes a navigation. It is buggy because the navigation triggers a re-render of this component (due to the usage of useLocation), which calculates a new tabIndex which causes onChange to be fired again, causing a new navigation (to the same route).

While most of the time this behavior doesn't cause any problems, on slower networks (I'm throttling my network) it causes the navigation to fail. I tried to do some debugging and my understanding is that the second navigation event causes the first to be aborted, which leads Remix to cancel the loading of the manifest and navigate to the incorrect route

Note: I realize this is far from being a great bug report but not being familiar with how the Remix internals work I struggle to provide better details or even to find the right way to reproduce it - happy to share more details or even jump on a call to show what we experience

System Info

System:
  OS: macOS 14.1.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 50.91 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.12.0 - /usr/local/bin/node
  Yarn: 1.22.22 - ~/Code/passionfroot/remix/node_modules/.bin/yarn
  npm: 10.8.2 - ~/Code/passionfroot/remix/node_modules/.bin/npm
  pnpm: 8.14.0 - /usr/local/bin/pnpm
  bun: 1.1.42 - ~/.bun/bin/bun
Browsers:
  Chrome: 131.0.6778.205
  Safari: 17.1
npmPackages:
  @remix-run/dev: ^2.15.2 => 2.15.2 
  @remix-run/express: ^2.15.2 => 2.15.2 
  @remix-run/node: ^2.15.2 => 2.15.2 
  @remix-run/react: ^2.15.2 => 2.15.2 
  @remix-run/route-config: ^2.15.2 => 2.15.2 
  @remix-run/routes-option-adapter: ^2.15.2 => 2.15.2 
  vite: ^5.4.5 => 5.4.8

Used Package Manager

npm

Expected Behavior

Navigation should work without throwing (even if the buggy code I shared above)

Actual Behavior

Remix believes it has all available "matches" but ends up navigating to the wrong route, which throws the following error
Route "routes/_index+/conversations+/$conversationId+/_layout" does not match URL "/conversations/archived"

[tigerabrodi]

@elledienne

I think one way you could work around this is by using a state and explicitly navigating when state is different from active tab:

    if (tab !== activeTab) {
      const pathname = tab === tabNames.active ? "/conversations" : "/conversations/archived";
      navigate(pathname);
    }

[brophdawg11]

Fixed by #10447

[github-actions]

🤖 Hello there,

We just published version 2.15.3-pre.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.15.3 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!