48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
|
---
|
|||
|
|
name: jjb-route-navigation
|
|||
|
|
description: 定义 JJB 项目路由跳转方法规范。在使用 history.push、路由参数拼接或页面导航时使用。禁止使用 state 传值，仅路由页面组件可获取 history。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 路由与导航
|
|||
|
|
|
|||
|
|
## 路由跳转方法
|
|||
|
|
|
|||
|
|
- **跳转方法**：在应用中使用 `history.push()` 方法实现路由跳转
|
|||
|
|
|
|||
|
|
- **重要约束**：`history.push()` 方法**仅会在路由页面组件中自动注入到 `props`**
|
|||
|
|
|
|||
|
|
- 适用范围：仅限 `src/pages/` 目录下的页面组件
|
|||
|
|
|
|||
|
|
- 使用示例：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 在 pages/Container/UserList/index.jsx 中
|
|||
|
|
function UserList(props) {
|
|||
|
|
const handleNavigate = () => {
|
|||
|
|
props.history.push('/user/detail/123');
|
|||
|
|
};
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- 路由参数拼接：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 使用查询参数方式传递参数
|
|||
|
|
function UserList(props) {
|
|||
|
|
const handleNavigate = () => {
|
|||
|
|
props.history.push(`/user/detail?id=123`);
|
|||
|
|
};
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- 禁止行为：禁止使用 `state` 传值
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// ❌ 禁止使用以下方式
|
|||
|
|
props.history.push({ pathname: '/user/detail', state: { id: 123 } });
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- 禁止行为：禁止在非路由页面组件（如 `src/components/` 中的组件）中直接使用 `history.push()`，应通过 `props` 传递或使用其他导航方式
|