要解决这个问题，你可以使用React Router来处理导航到另一个React页面时的情况。React Router是React官方推荐的路由库，它可以帮助我们管理应用程序的导航。

首先，你需要安装React Router。可以使用以下命令使用npm安装React Router：

npm install react-router-dom

接下来，你可以创建一个新的React组件来处理导航和beforeunload事件。在这个组件中，你可以使用React Router提供的组件来导航到另一个React页面。同时，在组件的componentDidMount方法中，你可以添加beforeunload事件处理程序来处理重新加载页面的情况。

这是一个示例代码：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class MyComponent extends Component {
  componentDidMount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload = (event) => {
    // 在重新加载页面时触发的逻辑
    event.preventDefault();
    event.returnValue = '';
  }

  render() {
    return (
      

        
My Component
        Go to Another Page
      
    );
  }
}

export default MyComponent;

在这个示例代码中，我们在组件的componentDidMount方法中添加了一个beforeunload事件处理程序，并在componentWillUnmount方法中进行了清理。在handleBeforeUnload方法中，我们使用event.preventDefault()取消了默认的beforeunload行为，并设置了event.returnValue来显示一个确认消息。

当用户点击组件时，React Router将会导航到另一个React页面，并且beforeunload事件处理程序不会被触发。这是因为React Router使用了单页应用程序的路由技术，不会导致整个页面的重新加载。

希望这个解决方法对你有帮助！