如何在react导航中导航和传递同一组件上的道具？

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

class NavigationComponent extends React.Component {
  render() {
    return (
      <div>
        <Link to={{
          pathname: '/ComponentName',
          state: { propName: propValue }
        }}>Go to ComponentName</Link>
      </div>
    );
  }
}

class ComponentName extends React.Component {
  render() {
    const propName = this.props.location.state.propName;
    
    // 使用propName进行组件渲染和逻辑处理
    
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  }
}