如何通过react路由器将道具传递给另一个组件？

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

function ComponentA() {
  const propValue = 'Hello, World!';

  return (
    <Link to={{
      pathname: '/componentB',
      state: { propValue }
    }}>
      Go to Component B
    </Link>
  );
}

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

function ComponentB() {
  const location = useLocation();
  const propValue = location.state.propValue;

  return (
    <div>
      <h1>Component B</h1>
      <p>Prop value: {propValue}</p>
    </div>
  );
}

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

function ComponentB(props) {
  const propValue = props.location.state.propValue;

  return (
    <div>
      <h1>Component B</h1>
      <p>Prop value: {propValue}</p>
    </div>
  );
}

export default withRouter(ComponentB);