React-Router：未传入URL参数时重定向至首页的实现方法

你的问题出在直接在组件渲染阶段执行导航操作，这会触发组件无限重渲染，同时React也不允许在渲染流程中进行路由跳转这类副作用操作。

可以用useEffect钩子来包裹重定向逻辑，确保只在组件挂载或id变化时执行一次：

import { useParams, useNavigate, useEffect } from 'react-router-dom';

export default function Summary() {
  const { id } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    // 严谨判断id是否存在，包括空字符串的情况
    if (!id || id.trim() === '') {
      navigate('/home');
    }
  }, [id, navigate]); // 依赖id和navigate，确保变化时触发

  // 其他组件逻辑...
}

补充说明 #

• useEffect的依赖数组里加入id，保证当id从无到有（比如路由变化）时重新判断；加入navigate是因为React Router的useNavigate返回的函数是稳定的，不会频繁触发，但加进去更符合Hook规范。
• 如果重定向后不想执行组件的后续逻辑，后续代码只会在id有效时运行，无需额外处理。

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