类组件内的 react-router-dom useParams()

我正在尝试加载基于 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 ， - - 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);

文章来源：https://segmentfault.com/q/1010000042465782