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

Question

我正在尝试加载基于react-router-dom路由的详细信息 View ，该路由应该获取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.

文档仅显示基于功能组件的示例，而不是基于类的示例。

Answer 1

版本 <= 5:

您可以使用withRouter来完成此操作。只需将导出的类组件包装在 withRouter 中，然后您可以使用 this.props.match.params.id 来获取参数，而不是使用 useParams() 。您还可以使用 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);

就这么简单!