类组件内部的react-router-dom useParams（）

Question

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;

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Answer 1

您可以使用withrouger来实现这一点。只需将导出的类组件包装在wishrouter中，然后就可以使用this.props.match.params.id来获取参数，而不是使用useparams()。您还可以通过使用withrouger获取任何位置、匹配或history信息。它们都是在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);

就这么简单！