使用React Navigate Hook切换设备模式时触发无限循环问题求助

问题原因 #

• 你直接在通配符路由的element中使用useMediaQuery判断并返回Navigate组件，每次路由匹配都会触发这个判断，而Navigate的重定向又会再次触发路由匹配，形成无限循环。
• 如果useMediaQuery钩子每次渲染都返回新的状态值（比如内部没有稳定的状态管理），会导致组件反复渲染，进一步加剧循环。

修复方案 #

1. 将媒体查询的判断逻辑移到组件内部，使用useEffect监听媒体查询状态变化，仅在状态改变且当前路径不符合目标路径时执行重定向，避免无意义的重复触发。
2. 给路由配置明确的路径与组件对应关系，减少通配符路由的触发频率。
3. 确保useMediaQuery钩子内部使用稳定的状态管理（比如通过addEventListener监听媒体查询变化，而非每次渲染重新计算）。

修改后的代码示例 #

import "./App.scss";
import React, { Fragment, useEffect } from "react";
import { useMediaQuery } from "./hooks/MediaQuery";
import Desktop from "./Pages/Desktop/Desktop";
import Mobile from "./Pages/Mobile/Mobile"; // 替换为你的移动端组件
import { Route, Routes, useNavigate } from "react-router-dom";

function App() {
  const isDesktop = useMediaQuery(750);
  const navigate = useNavigate();

  useEffect(() => {
    // 仅在设备状态变化且当前路径不匹配时重定向
    const targetPath = isDesktop ? "/" : "/m";
    if (window.location.pathname !== targetPath) {
      navigate(targetPath, { replace: true });
    }
  }, [isDesktop, navigate]);

  return (
    <Fragment>
      <div className="App">
        <Routes>
          {/* 明确配置各路径对应的组件 */}
          <Route path="/" element={<Desktop />} />
          <Route path="/m" element={<Mobile />} />
          {/* 处理未匹配的路径，根据当前设备重定向 */}
          <Route 
            path="*" 
            element={isDesktop ? <Navigate replace to="/" /> : <Navigate replace to="/m" />} 
          />
        </Routes>
      </div>
    </Fragment>
  );
}

export default App;

额外说明 #

• 使用useNavigate钩子替代直接在路由element中返回Navigate组件，配合useEffect的依赖数组，确保只有当设备状态或导航实例变化时才执行重定向逻辑。
• 增加路径判断，避免当前路径已经符合目标时重复执行重定向，彻底切断循环链条。

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