recat 页面跳转接收url参数

在React应用中，页面跳转并接收URL参数通常通过`useHistory` hook配合路由管理库如React Router来实现。首先，安装所需的依赖，例如`react-router-dom`：

npm install react-router-dom

然后，在组件中，你可以这样做：

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  // 当需要跳转并且传递参数时
  const handleClick = (param) => {
    history.push(`/your-route?param=${param}`);
  };

  return (
    <button onClick={() => handleClick('example')}>点击跳转</button>
  );
}

在这个例子中，当用户点击按钮，会跳转到`/your-route`，并在URL查询字符串中添加名为`param`的键值对，其值为`example`。

在目标页面（例如`YourRoute.js`），你可以使用`useParams`钩子来获取传入的参数：

import { useParams } from 'react-router-dom';

function YourRoute() {
  const { param } = useParams();
  console.log('Received parameter:', param);

  return <div>处理参数...</div>;
}