当前位置：首页 > React

react dva如何实现跳转

2026-02-12 10:18:55React

react dva 实现跳转的方法

在 React Dva 框架中，实现页面跳转可以通过 dva/router 提供的 routerRedux 或直接使用 history 对象。以下是几种常见的方法：

使用 routerRedux 进行跳转

routerRedux 是 Dva 提供的路由工具，通过 dispatch 方法触发路由跳转。

import { routerRedux } from 'dva/router';

// 在组件中通过 props 获取 dispatch
const { dispatch } = this.props;

// 跳转到指定路径
dispatch(routerRedux.push('/path/to/target'));

如果需要传递参数，可以通过对象形式：

dispatch(routerRedux.push({
  pathname: '/path/to/target',
  query: { id: 123 }, // 查询参数
}));

使用 history 对象直接跳转

Dva 默认集成了 history 对象，可以通过 props 获取并直接调用跳转方法。

// 在组件中通过 props 获取 history
const { history } = this.props;

// 跳转到指定路径
history.push('/path/to/target');

传递参数的方式与 routerRedux 类似：

history.push({
  pathname: '/path/to/target',
  state: { id: 123 }, // 通过 state 传递参数
});

在 Model 或 Effect 中跳转

在 Dva 的 Model 或 Effect 中，可以通过 put 方法调用 routerRedux 实现跳转。

import { routerRedux } from 'dva/router';

// 在 Effect 中跳转
*someEffect(_, { put }) {
  yield put(routerRedux.push('/path/to/target'));
}

动态路由跳转

如果需要跳转到动态路由（如 /user/:id），可以通过以下方式：

dispatch(routerRedux.push(`/user/${userId}`));

或：

history.push(`/user/${userId}`);

返回上一页

使用 goBack 方法可以返回上一页：

history.goBack();

或通过 routerRedux：

dispatch(routerRedux.goBack());

替换当前路由

如果需要替换当前路由（不保留历史记录），可以使用 replace 方法：

history.replace('/path/to/target');

或：

dispatch(routerRedux.replace('/path/to/target'));

注意事项

组件中获取 dispatch 或 history：确保组件已通过 connect 连接到 Dva 或直接从路由组件中获取 props。
路由参数获取：跳转后，目标页面可以通过 props.location.query 或 props.location.state 获取传递的参数。
动态路由参数：动态路由的参数需要通过 props.match.params 获取。