react umi 路由传参

在React Umi中，可以通过路由传参来传递参数给目标页面。下面是一种常用的方法：

1. 使用query参数传递参数：
在源页面使用`history.push`或`Link`组件跳转到目标页面时，可以通过在URL中添加参数来传递数据。例如：

import { Link } from 'umi';

function SourcePage() {
  const data = { name: 'John', age: 25 };

  return (
    <Link to={`/target?name=${data.name}&age=${data.age}`}>
      Go to Target Page
    </Link>
  );
}

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

function TargetPage({ location }) {
  const { name, age } = location.query;

  return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
    </div>
  );
}

2. 使用state参数传递参数：
在源页面使用`history.push`或`Link`组件跳转到目标页面时，可以通过state参数来传递数据。例如：

import { Link } from 'umi';

function SourcePage() {
  const data = { name: 'John', age: 25 };

  return (
    <Link to={{ pathname: '/target', state: data }}>
      Go to Target Page
    </Link>
  );
}

在目标页面中，可以通过`location.state`来获取传递的参数。例如：

function TargetPage({ location }) {
  const { name, age } = location.state;

  return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
    </div>
  );
}