React Router中useNavigate改URL后组件未渲染问题求助

点击Component2中的按钮后，URL成功切换到/Component1，但页面UI仍停留在Component2，Component1从未被渲染。移除Component2中的setTimeout()，或者移除Routes.jsx中的const { token } = provideContext();，问题就会消失。

1. Router实例频繁重建：Routes组件每次渲染时都会重新调用createBrowserRouter创建新的路由实例。当点击按钮调用setToken时，Context的状态更新会触发Routes组件重渲染，导致新的Router实例被创建并替换旧实例。
2. 导航上下文不匹配：setTimeout中的navigate是来自旧Router实例的useNavigate钩子。当新Router实例替换旧实例后，旧的navigate操作的是已经被废弃的Router上下文，虽然URL发生了变化，但新Router并未正确响应这次导航，导致UI没有更新。
3. 无意义的重渲染触发：Routes组件中仅获取了token但并未实际使用，这会导致Context状态变化时触发不必要的重渲染，进而触发Router实例重建，放大了问题。

方案1：稳定Router实例（推荐） #

将createBrowserRouter的创建移到Routes组件外部，确保仅创建一次；若路由配置需依赖状态，使用useMemo缓存实例避免重复创建：

// Routes.jsx
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { provideContext } from "./provider/contextProvider";
import Component1 from "./pages/Component1";
import Component2 from "./pages/Component2";

// 移到组件外部，仅初始化一次
const router = createBrowserRouter([
  {
    path: "/Component2",
    element: <Component2 />,
  },
  {
    path: "/Component1",
    element: <Component1 />,
  },
]);

const Routes = () => {
  // 若不需要token，直接移除该行；若需要，确保依赖项仅在必要时更新
  // const { token } = provideContext();

  return <RouterProvider router={router} />;
};

export default Routes;

方案2：移除不必要的Context依赖 #

如果Routes组件并未实际使用token，直接删除const { token } = provideContext();这一行，避免Context状态变化触发Routes重渲染，从而防止Router实例频繁重建。

方案3：调整导航时机（临时解决） #

若必须保留setTimeout，可去掉延迟直接同步导航，确保在Router实例重建前完成导航操作：

// Component2.jsx
const Component2 = () => {
  const navigate = useNavigate();
  const { setToken } = provideContext();
  
  const onClick = () => {
    setToken("Token");
    // 移除setTimeout，同步执行导航
    navigate("/Component1");
  };

  return (
    <>
      <button onClick={onClick}>Click me</button>
    </>
  );
};

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