我是React，React Router（v4）和Redux的新手。我通过访问mapStateToProps(state, ownProps)尝试从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);
的相关代码：
+-----------+--------------+
| Subledger | ActualAmount |
+-----------+--------------+
| WWE12 | -25775 |
| WWE12 | -217 |
| WWE12 | -43 |
| WWE12 | 260 |
| WWE12 | 48994 |
+-----------+--------------+
答案 0 :(得分：4)
您必须翻转以下路线的顺序或将exact属性设置为第一条路线。
<Route path='/course' component={ManageCoursePage} />
<Route path='/course/:id' component={ManageCoursePage} />
/course在/course/:id之前匹配，这就是在没有id参数的情况下调用ManageCoursePage的原因。
如果您只想在第一条路线中匹配/course而不是/course/123，则可以设置exact property。