链接跳转AddPersonForm时mapDispatchToProps未调用问题咨询

让我帮你拆解这个问题的核心原因，以及对应的解决办法：

核心问题1：导入了未经过Redux连接的原始组件 #

你在Person组件中使用命名导入引入AddPersonForm：

import { AddPersonForm } from '../Inputs/AddPersonForm';

但在AddPersonForm文件中，export class AddPersonForm是未绑定Redux的原始组件类，而经过connect处理、绑定了addPerson action的组件是作为默认导出存在的：

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

这就导致：

• 通过history.push重定向时，命中的是外层路由中使用默认导入的已连接组件，所以能正常调用addPerson
• 通过内部Link跳转时，渲染的是未绑定Redux的原始组件，自然找不到this.props.addPerson方法

核心问题2：嵌套了多余的Router组件 #

React Router要求整个应用只需要一个顶级Router（通常放在入口文件或App根组件中），你在Person组件内部嵌套Router会导致路由上下文混乱，不仅干扰组件匹配，还可能影响Redux与路由的协作。

解决方案步骤 #

1. 修正AddPersonForm的导入方式 #

在Person组件中，将命名导入改为默认导入，确保使用的是经过Redux连接的组件：

// 替换原来的命名导入
import AddPersonForm from '../Inputs/AddPersonForm';

2. 移除嵌套的Router组件 #

修改Person组件的render方法，去掉内部的<Router>标签，保留Switch、Route和Link即可（它们会复用顶级Router的上下文）：

render() {
  if (this.props.person == "unfound") {
    // 推荐用Redirect组件替代直接调用history.push，更符合React Router规范
    return <Redirect to="/add-person" />;
  } else {
    return (
      <div>
        <div className="container">
          <div>
            <Link to={`${this.props.match.url}/reviews/new`}>
              Add a New Review for this Person
            </Link><br />
            <Link to='/add-person'>Not the {this.props.person.name} you were looking for? Add them to our system! </Link>
            <div>
              <Switch>
                <Route path={`${this.props.match.url}/reviews/new`} component={AddReviewForm} />
                <Route path='/add-person' component={AddPersonForm}/>
              </Switch>
            </div>
          </div>
        </div>
        <FormattedPerson 
          name={this.props.person.name} 
          description={this.props.person.description} 
          location={this.props.person.location} 
          reviews={this.props.person.reviews} 
        />
      </div>
    );
  }
}

3. 优化mapDispatchToProps的写法（推荐） #

你当前的mapDispatchToProps写法存在缺陷：它没有接收dispatch参数，返回的addPerson只是原始action creator，未被dispatch包裹。推荐两种更可靠的写法：

写法一：直接传递action creator对象

connect支持直接传入对象，会自动用dispatch包裹所有action creator：

// 替换原来的mapDispatchToProps
export default connect(null, { addPerson })(AddPersonForm);

写法二：函数式写法（适合需要自定义逻辑的场景）

手动接收dispatch参数并包裹action creator：

const mapDispatchToProps = (dispatch) => {
  return {
    addPerson: (person) => dispatch(addPerson(person))
  };
};

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

内容的提问来源于stack exchange，提问作者adam tropp