react dva如何获取参数

在 React Dva 中获取参数的方法

通过路由参数获取

在 Dva 中，路由参数可以通过 props.match.params 获取。假设路由配置中定义了参数 id：

// router.js
export function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/detail/:id" component={DetailPage} />
      </Switch>
    </Router>
  );
}

在组件中获取参数：

// DetailPage.js
function DetailPage(props) {
  const { id } = props.match.params;
  console.log(id); // 输出路由中的 id 参数
}

通过查询参数获取

查询参数可以通过 props.location.query 或 URLSearchParams 获取。例如 URL 为 /list?page=1&size=10：

// ListPage.js
function ListPage(props) {
  const query = new URLSearchParams(props.location.search);
  const page = query.get('page');
  const size = query.get('size');
  console.log(page, size); // 输出 1 和 10
}

通过 Dva model 的订阅获取

在 Dva 的 model 中，可以通过 subscriptions 监听路由变化并获取参数：

// model.js
export default {
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen((location) => {
        const query = new URLSearchParams(location.search);
        const page = query.get('page');
        dispatch({ type: 'fetchData', payload: { page } });
      });
    },
  },
};

通过 connect 获取全局状态

如果参数存储在全局状态中，可以通过 connect 连接 model 并获取：

// Component.js
import { connect } from 'dva';

function Component({ params }) {
  console.log(params); // 输出全局状态中的 params
}

export default connect(({ global }) => ({
  params: global.params,
}))(Component);

通过 payload 传递参数

在 Dva 的 effects 或 reducers 中，可以通过 payload 传递参数：

// model.js
export default {
  effects: {
    *fetchData({ payload }, { call, put }) {
      const { id } = payload;
      console.log(id); // 输出 payload 中的 id
    },
  },
};

调用时传递参数：

// Component.js
dispatch({
  type: 'model/fetchData',
  payload: { id: 123 },
});

通过动态路由跳转传递参数

在跳转路由时，可以通过 push 方法传递参数：

// Component.js
props.history.push({
  pathname: '/detail',
  query: { id: 123 },
});

在目标页面通过 props.location.query 获取参数：

// DetailPage.js
function DetailPage(props) {
  const { id } = props.location.query;
  console.log(id); // 输出 123
}