我正在尝试加载基于react-router-dom 路由的详细信息视图,该路由应该获取URL 参数(id)并使用它来进一步填充组件。
我的路线看起来像/task/:id
我的组件加载得很好,直到我尝试从 URL 中获取 :id,如下所示:
import React from "react";
import { useParams } from "react-router-dom";
class TaskDetail extends React.Component {
componentDidMount() {
let { id } = useParams();
this.fetchData(id);
}
fetchData = id => {
// ...
};
render() {
return <div>Yo</div>;
}
}
export default TaskDetail;
这会触发以下错误,我不确定在哪里正确实现 useParams()。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
该文档仅显示基于功能组件的示例,而不是基于类的示例。
版本
您可以使用withRouter
来实现这一点。只需将导出的分类组件包装在withRouter
然后你可以使用this.props.match.params.id
获取参数而不是使用useParams()
。您还可以获得任何location
, match
, or history
通过使用信息withRouter
。它们都是在下面传入的this.props
使用您的示例,它看起来像这样:
import React from "react";
import { withRouter } from "react-router";
class TaskDetail extends React.Component {
componentDidMount() {
const id = this.props.match.params.id;
this.fetchData(id);
}
fetchData = id => {
// ...
};
render() {
return <div>Yo</div>;
}
}
export default withRouter(TaskDetail);
就那么简单!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)