CODEWITHSUNDEEP
reactjsreact-hooks
Gleyson Abreu
Gleyson Abreu

Reputation: 111

ReactJS error on using hooks with react router dom v6

I'm using the react router dom v6(tests) to create routes. In one of the delete routes I am not getting the result of an api because I have an error. I'm not able to get through useParams () the parameters passed in the url to do the search in the api. The error is

Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See for tips about how to debug and fix this problem.
▶ 2 stack frames were collapsed.
useParams
C:/wamp64/packages/react-router/modules/index.js:383
380 | * This is useful for components that need to know "active" state, e.g.
381 | * .
382 | */
383 | export function useMatch(to) {
384 | let location = useLocation();
385 | let resolvedLocation = useResolvedLocation(to);
386 | // TODO: Try to match search + hash as well
View compiled
Delete.renderResult
C:/wamp64/www/apirest-react/src/actions/Delete/index.js:18
15 |
16 | renderResult = async () => {
17 |
18 | const {id} = useParams();
| ^ 19 | const response = await api.get(/users/delete/${id}/Gla123);
20 | this.setState({message: response.data.message});

MY CODE:

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>
        );
    }
}

Upvotes: 1

Views: 1170

Answers (1)

demkovych
demkovych

Reputation: 8827

you are not able to use hooks inside class components. Instead you should use withRouter HOC and get params from match property.

Upvotes: 2

Related Questions