mapStateToProps ownProps 参数为空

Question

我是 React、React Router (v4) 和 Redux 的新手。我试图mapStateToProps(state, ownProps)通过访问来访问 URL 参数，ownProps.match.params.id但params数组始终为空。我已经使用调试器来检查 ownProps 并且id应该传递的参数不在ownProps.

这是我的路线的片段：

    <Switch>
      <Route exact path='/' component={HomePage} />
      <Route path='/about' component={AboutPage} />
      <Route path='/course' component={ManageCoursePage} />
      <Route path='/course/:id' component={ManageCoursePage} />
      <Route path='/courses' component={CoursesPage} />
    </Switch>

这是来自的相关代码ManageCoursePage.js：

class ManageCoursePage extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      course: Object.assign({}, props.course),
      errors: {},
    };
  }
}

function mapStateToProps(state, ownProps) {
  const courseId = ownProps.match.params.id;
  ...
}

export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage);

Answer 1

您必须翻转以下路线的顺序或将exact属性设置为第一条路线。

<Route path='/course' component={ManageCoursePage} />
<Route path='/course/:id' component={ManageCoursePage} />

/course/course/:id这就是为什么ManageCoursePage在没有 id 参数的情况下调用之前的匹配项。如果您只想匹配/course您的第一条路线而不是/course/123您可以设置exact属性。