React Router中<Navigate>与setSearchParams冲突致导航失效问题

问题现象 #

在react-router-dom里，当同时使用<Navigate>组件做页面重定向，并且调用setSearchParams方法设置URL查询参数时，<Navigate>的导航操作会失效，页面无法跳转到目标路径。

复现代码 #

export default function App() {
  return (
    <HashRouter>
      <Routes />
    </HashRouter>
  );
}
const Routes = () => {
  const [, setSearchParams] = useSearchParams({});

  useEffect(() => {
    setSearchParams({ lang: "test" });
  }, [setSearchParams]);

  return useRoutes([
    {
      path: "/",
      element: <Outlet />,
      children: [
        {
          path: "",
          element: <Navigate replace to={`/page`} />
        },
        {
          path: `/page`,
          element: <h1>Page</h1>
        }
      ]
    }
  ]);
};

临时解决办法 #

将setSearchParams的调用用setTimeout包裹，延迟到下一次事件循环执行，这样既能完成页面重定向，又能正常设置查询参数：

useEffect(() => {
  setTimeout(() => {
    setSearchParams({ lang: "test" });
  }, 0);
}, [setSearchParams]);

问题原因 #

这是react-router的已知内部时序问题，同步执行的setSearchParams会干扰<Navigate>组件的导航状态更新逻辑，导致导航操作被覆盖或取消。通过延迟执行setSearchParams，可以避开两者的状态更新冲突，让导航和参数设置都能正常完成。

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