react dva如何实现跳转

dva 中实现页面跳转的方法

在 dva 框架中，页面跳转可以通过 dva/router 提供的路由方法实现。以下是几种常见的跳转方式：

使用 routerRedux 进行编程式导航

安装依赖：

npm install --save react-router-redux@next

在组件中引入并使用：

import { routerRedux } from 'dva/router';

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

使用 Link 组件进行声明式导航

在组件中引入：

import { Link } from 'dva/router';

// 在 render 中使用
<Link to="/path">跳转链接</Link>

带参数的跳转

传递参数：

dispatch(routerRedux.push({
  pathname: '/user',
  query: { id: 123 },
}));

接收参数：

// 在目标组件中获取
const { id } = this.props.location.query;

路由配置

确保在 router.js 中配置了对应的路由：

import { Router, Route } from 'dva/router';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Route path="/path" component={YourComponent} />
    </Router>
  );
}

动态路由跳转

对于动态路由如 /user/:id：

dispatch(routerRedux.push('/user/123'));

获取动态参数：

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

替换当前路由

使用 replace 方法不保留历史记录：

dispatch(routerRedux.replace('/new-path'));

返回上一页

使用 goBack 方法：

dispatch(routerRedux.goBack());

以上方法覆盖了 dva 中常见的路由跳转场景，根据实际需求选择合适的方式即可。