umi开发完如何上线 (umi中如何使用高阶组件)

在 Umi 中，可以通过 Link 组件传递参数。可以使用 query 参数或者动态路由参数来传递参数。

1. 使用 query 参数传递参数：

jsxCopy Codeimport { Link } from 'umi';

function MyComponent() {
  return (
    <div>
      <Link to="/example?param1=value1¶m2=value2">Go to Example</Link>
    </div>
  );
}

<Link to={`/basic/keywordSearch?webId=` + webId}> <Button type="primary" icon={ <IconFont type="icon-shouye-sousuo-sousuo" style={{ color: " rgba(255,255,255, 1)", fontSize: "1.2rem", }} /> } > 搜索 </Button> </Link>

在上面的代码中，我们使用 Link 组件的 to 属性来指定目标路由，并通过 query 参数传递了 param1 和 param2 两个参数。

在目标页面中，可以通过 location.query 获取传递的参数：

jsxCopy Codefunction Example({ location }) {
  const { param1, param2 } = location.query;

  return (
    <div>
      <p>Param 1: {param1}</p>
      <p>Param 2: {param2}</p>
    </div>
  );
}

在上面的代码中，我们从 location.query 中获取了传递的参数，并展示在页面上。

2. 使用动态路由参数传递参数：

jsxCopy Codeimport { Link } from 'umi';

function MyComponent() {
  return (
    <div>
      <Link to="/example/value1/value2">Go to Example</Link>
    </div>
  );
}

在上面的代码中，我们使用 Link 组件的 to 属性来指定目标路由，并通过动态路由参数传递了 value1 和 value2 两个参数。

在目标页面中，可以通过 match.params 获取传递的参数：

jsxCopy Codefunction Example({ match }) {
  const { value1, value2 } = match.params;

  return (
    <div>
      <p>Param 1: {value1}</p>
      <p>Param 2: {value2}</p>
    </div>
  );
}

在上面的代码中，我们从 match.params 中获取了传递的参数，并展示在页面上。

需要注意的是，使用动态路由参数传递参数时，需要定义对应的路由规则，如：

jsxCopy Codeexport default [
  {
    path: '/example/:param1/:param2',
    component: '@/pages/example'
  }
];

在路由配置中，使用 :param1 和 :param2 定义动态参数的占位符。

通过以上两种方式，你可以在 Umi 中实现传递参数给其他页面或组件的功能。