如何使用React导航从Redux表单导航到另一个屏幕？_React本地导航:从React组件外部导航到屏幕_React导航-导航到另一个屏幕 - 腾讯云开发者社区

使用React导航从Redux表单导航到另一个屏幕可以通过以下步骤实现：

首先，确保你已经安装了React和Redux，并且已经设置好了Redux store。
在Redux中，你可以使用React Router来处理导航。安装React Router库并导入所需的组件。
在Redux表单组件中，使用connect函数将组件连接到Redux store，并将导航所需的state和action作为props传递给组件。
在Redux表单组件中，使用react-router-dom库中的Link组件来创建导航链接。将导航链接指向目标屏幕的路径。
在Redux表单组件中，使用Redux的dispatch函数来触发导航操作。在提交表单或其他特定条件下，调用dispatch函数来触发导航操作。
在目标屏幕组件中，使用connect函数将组件连接到Redux store，并将导航所需的state和action作为props传递给组件。
在目标屏幕组件中，根据传递的props显示相应的内容或执行相应的操作。

下面是一个示例代码：

// Redux表单组件
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { navigateToScreen } from '../actions/navigationActions';

const ReduxFormComponent = ({ navigateToScreen }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单提交逻辑
    // ...
    // 导航到目标屏幕
    navigateToScreen('/target-screen');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        {/* ... */}
        <button type="submit">提交</button>
      </form>
      <Link to="/target-screen">直接导航到目标屏幕</Link>
    </div>
  );
};

const mapDispatchToProps = {
  navigateToScreen,
};

export default connect(null, mapDispatchToProps)(ReduxFormComponent);

// 目标屏幕组件
import React from 'react';
import { connect } from 'react-redux';

const TargetScreenComponent = ({ formData }) => {
  return (
    <div>
      {/* 显示表单数据 */}
      {/* ... */}
    </div>
  );
};

const mapStateToProps = (state) => ({
  formData: state.formData,
});

export default connect(mapStateToProps)(TargetScreenComponent);

在上述示例中，我们使用了React Router的Link组件来创建导航链接，使用Redux的connect函数将组件连接到Redux store，并使用mapDispatchToProps将navigateToScreen action绑定到组件的props上。在Redux表单组件中，当表单提交时，我们调用navigateToScreen action来触发导航操作。在目标屏幕组件中，我们使用connect函数将组件连接到Redux store，并使用mapStateToProps将表单数据绑定到组件的props上。