react dva如何实现跳转

在 React Dva 中实现页面跳转

Dva 是基于 React 和 Redux 的轻量级框架，提供了路由管理功能。页面跳转可以通过 router 或 history 实现。

使用 router 跳转

在 Dva 中，可以通过 router 对象进行跳转。通常在组件的 props 中可以访问到 router。

// 在组件中跳转
this.props.history.push('/path');

如果是函数组件，可以通过 useHistory Hook 实现：

import { useHistory } from 'dva/router';

function MyComponent() {
  const history = useHistory();
  history.push('/path');
}

使用 history 跳转

Dva 集成了 connected-react-router，可以直接使用 history 对象跳转。

// 在 effects 或组件外跳转
import { routerRedux } from 'dva/router';

// 在 effects 中跳转
yield put(routerRedux.push('/path'));

// 在组件中跳转
dispatch(routerRedux.push('/path'));

带参数的跳转

跳转时可以传递参数，例如：

// 传递 query 参数
this.props.history.push({
  pathname: '/path',
  query: { id: 123 },
});

// 传递 state 参数
this.props.history.push('/path', { id: 123 });

接收参数：

// 接收 query 参数
const { id } = this.props.location.query;

// 接收 state 参数
const { id } = this.props.location.state;

动态路由跳转

如果路由是动态的（如 /user/:id），可以这样跳转：

this.props.history.push('/user/123');

接收参数：

const { id } = this.props.match.params;

返回上一页

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

this.props.history.goBack();

注意事项

• 确保组件是通过路由渲染的，否则 props 中可能没有 history 或 router。
• 在 Dva 的 models 中跳转时，需要使用 routerRedux。
• 如果使用函数组件，优先使用 useHistory Hook。