safety-eval-service-frontend/.cursor/skills/specs/04-路由与导航/01-路由跳转方法/SKILL.md

name	description
jjb-route-navigation	定义 JJB 项目路由跳转方法规范。在使用 history.push、路由参数拼接或页面导航时使用。禁止使用 state 传值，仅路由页面组件可获取 history。

路由与导航

路由跳转方法

• 跳转方法：在应用中使用 history.push() 方法实现路由跳转

• 重要约束：history.push() 方法仅会在路由页面组件中自动注入到 props

  • 适用范围：仅限 src/pages/ 目录下的页面组件

  • 使用示例：

    // 在 pages/Container/UserList/index.jsx 中
    function UserList(props) {
      const handleNavigate = () => {
        props.history.push('/user/detail/123');
      };
      // ...
    }
    

  • 路由参数拼接：

    // 使用查询参数方式传递参数
    function UserList(props) {
      const handleNavigate = () => {
        props.history.push(`/user/detail?id=123`);
      };
      // ...
    }
    

  • 禁止行为：禁止使用 state 传值

    // ❌ 禁止使用以下方式
    props.history.push({ pathname: '/user/detail', state: { id: 123 } });
    

  • 禁止行为：禁止在非路由页面组件（如 src/components/ 中的组件）中直接使用 history.push()，应通过 props 传递或使用其他导航方式