React Router 6.4+：带loader的页面首次加载时主组件重复渲染

我是SPA开发新手，正在搭建基础Demo练习技能。项目包含Home、Gallery、Contact三个页面：

• 从其他页面导航到Gallery页面时一切正常
• 但直接访问Gallery路由（/gallery）时，RouterProvider组件内所有内容会莫名渲染两次

已经排除React.StrictMode的影响，生产环境仍存在该问题，且我未发现JSX代码有重复编写的情况。

核心代码示例 #

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import Gallery from "./pages/Gallery";
import Contact from "./pages/Contact";

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/gallery", element: <Gallery /> },
  { path: "/contact", element: <Contact /> },
]);

function App() {
  console.log("App 组件渲染");
  return <RouterProvider router={router} />;
}

export default App;

恳请有经验的开发者帮忙排查问题，欢迎任何建议或排查方向。

内容的提问来源于stack exchange，提问作者hAndg