ReactJS路由器-如何在带参数的函数组件中使用历史推送？

npm install react-router-dom

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

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

  // 在需要的地方使用history.push进行页面导航
  const handleClick = () => {
    history.push('/path/to/destination');
  };

  return (
    <div>
      <button onClick={handleClick}>导航到目标页面</button>
    </div>
  );
};

const handleClick = () => {
  const id = 123; // 参数值
  history.push(`/path/to/destination/${id}`);
};

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

const MyTargetComponent = () => {
  const { id } = useParams();

  // 使用参数值进行操作
  // ...

  return (
    <div>
      <h1>目标组件</h1>
      <p>参数值：{id}</p>
    </div>
  );
};