ReactJS ошибка при использовании хуков с реагирующим роутером dom v6

Question

Я использую реагирующий маршрутизатор dom v6 (тесты) для создания маршрутов. В одном из маршрутов удаления я не получаю результат API, потому что у меня есть ошибка. Я не могу получить через useParams () параметры, переданные в URL, чтобы выполнить поиск в API. Ошибка:

Необработанный отказ (ошибка): неверный вызов ловушки. Хуки могут быть вызваны только внутри тела компонента функции. Это может произойти по одной из следующих причин:
1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)
2. Возможно, вы нарушаете правила хуков
3. Вы может иметь более одной копии React в одном приложении
См. советы о том, как отладить и устранить эту проблему.
▶ 2 кадра стека свернуты.
useParams
C: / wamp64 /packages/react-router/modules/index.js:383
380 | * Это полезно для компонентов, которым необходимо знать «активное» состояние, например,
381 | *.
382 | * /
383 | функция экспорта useMatch (to) {
384 | let location = useLocation ();
385 | let resolvedLocation = useResolvedLocation (to);
386 | // TODO: Попытаться сопоставить также поиск + ha sh
Просмотр скомпилированного
Delete.renderResult
C: / wamp64 / www/apirest-react/src/actions/Delete/index.js: 18
15 |
16 | renderResult = asyn c () => {
17 |
18 | const {id} = useParams ();
| ^ 19 | const response = await api.get (/users/delete/${id}/Gla123);
20 | this.setState ({message: response.data.message});

МОЙ КОД:

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
import api from '../../services/api';
import './styles.css';
export default class Delete extends Component {

    state = {
        message: "Deleting user...",
    }

    componentDidMount() {
        this.renderResult();
    }

    renderResult = async () => {

        const { id } = useParams();
        const response = await api.get(`/users/delete/${id}/Gla123`);
        this.setState({ message: response.data.message });
    }
    render() {
        return (
            <div className="userDeleted">
                <div className="message">{this.state.message}</div>
            </div>
        );
    }
}

Answer 1

вы не можете использовать хуки внутри компонентов класса. Вместо этого вы должны использовать withRouter HO C и получать параметры из свойства match.