[Bug]: Mount happens twice on forward navigation

[sbleicher]

What version of React Router are you using?

6.26.1

Steps to Reproduce

Problem: mount happens twice when you navigate forward to a route. Tested with both Google Chrome and Firefox.

To replicate problem:

1. Click the "Change" button to route from / to /test
2. Click the browser back button to route from /test to /
3. Click the browser forward button to route from / to /test
4. Observe in the console that the first time you went to /test, "Mount" was printed once. The second time using the browser forward button "Mount" was printed twice.

import React, { useEffect } from 'react';
import { Routes, Route, Navigate, useNavigate } from "react-router-dom";

let count = 0;

function TestPage() {
  console.log(count);
  count = count + 1;

  useEffect(() => {
    console.log('Mount');
    return () => {
      console.log('Unmount');
    };
  }, []);

  return <div>Test</div>;
}

function TestRoot() {
  const navigate = useNavigate();

  const onClick = () => {
    navigate('/test');
  };

  return (
    <div>
      Root<button onClick={onClick}>Change</button>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Routes>
          <Route path="/">
            <Route index element={<TestRoot />} />
            <Route path=":uuid" element={<TestPage />} />
            <Route path="*" element={<Navigate to="/" replace />} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

Other Details:

• Compiled using webpack, when I ran using vite I could not replicate this issue. Please let me know if it would be useful to crosspost this to the webpack team.
• There is no React.StrictMode
• When I remove the div above Routes I get this error: Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Versions:

• "react": "^18.3.1",
• "react-dom": "^18.3.1",
• "react-router-dom": "^6.26.1",
• "webpack": "^5.94.0",

Expected Behavior

The component is only mounted once both times you navigate to /test

Actual Behavior

[timdorr]

This is likely caused by <StrictMode>. It renders components twice to ensure idempotence and catch other state-related bugs early.

[sbleicher]

Hi, I mentioned it above, but I removed <React.StrictMode> and the issue still happens. This is also reproducible with production builds. If it were caused by <React.StrictMode>, I would expect it to happen the first time the /test route loads, but it only happens once you navigate forward.

I may be misunderstanding of how <React.StrictMode> works. Sorry if that's the case.