[Bug]: window.location is not equal to useLocation() with loader in react 17

[holynewbie]

What version of React Router are you using?

6.11.1

Steps to Reproduce

package.json

{
  "name": "codesandbox-template-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^6.11.1"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react": "^2.0.0",
    "typescript": "^4.6.4",
    "vite": "^4.3.0"
  }
}

main.tsx

import React from "react";
import ReactDOM from "react-dom";
import {
  createBrowserRouter,
  RouterProvider,
  useNavigate,
  Outlet,
  useLocation,
} from "react-router-dom";

const App = () => {
  const nav = useNavigate();
  return (
    <div>
      <button onClick={() => nav("/abc?query=123")}>跳转</button>
      <Outlet />
    </div>
  );
};
const Abc = () => {
  const location = useLocation();
  console.log(
    "window.location: {pathname: %s, search: %s}",
    window.location.pathname,
    window.location.search
  );
  console.log(
    "useLocation(): {pathname: %s, search: %s}",
    location.pathname,
    location.search
  );

  return <div>abc</div>;
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "abc",
        element: <Abc />,
        loader() {
          // whatever code here
          return null;
        },
      },
    ],
  },
]);

ReactDOM.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
  document.getElementById("root") as HTMLElement
);

the result is wrong，window.location get older state。 But if I annotate the loader， it turns right.

Expected Behavior

window.location has same pathname、search ... with useLocation

Actual Behavior

2023-05-04.14.50.39.mov

[sash9696]

Hi @brophdawg11 , I would like to work on this issue. It would be of great help if you could assign it .

[timdorr]

Issues don't get assigned on public projects unless only one person can solve it. @holynewbie already submitted a PR.

[brophdawg11]

I think we can go ahead and merge the linked PR, but want to document here just for clarity that apps should not be relying on window.location and should always reference useLocation when possible. No matter what we do window.location will always be out of sync at one point or another (popstate events, concurrent mode, etc.) so this will fix this specific React 17 issue - but it will not make window.location a reliable source of data in a React Router app :)

[brophdawg11]

This is fixed by #10448 but didn't quite get merged in time for the pending 6.12.0 release, so it will be available on the next release after that goes out - likely 6.12.1 or 6.13.0

[github-actions]

🤖 Hello there,

We just published version 6.14.0-pre.0 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 6.14.0 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!