reagire-router-dom useParams () all'interno del componente di classe

Sto cercando di caricare una vista dei dettagli basata su una route di reazione-router-dom che dovrebbe afferrare il parametro URL (id) e usarlo per popolare ulteriormente il componente.

Il mio percorso è simile /task/:ide il mio componente si carica bene, fino a quando non provo ad afferrare: id dall'URL in questo modo:

    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;

Questo innesca il seguente errore e non sono sicuro di dove implementare correttamente useParams ().

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

I documenti mostrano solo esempi basati su componenti funzionali, non basati su classi.

Grazie per il tuo aiuto, sono nuovo a reagire.

È possibile utilizzare withRouterper ottenere questo risultato. È sufficiente avvolgere il componente classificato esportato all'interno di withRoutere quindi è possibile utilizzare this.props.match.params.idper ottenere i parametri anziché utilizzare useParams(). Puoi anche ottenerne uno qualsiasilocation , matcho historyinformazioni utilizzandowithRouter . Sono tutti passati sottothis.props

Usando il tuo esempio sarebbe simile a questo:

    import React from "react";
    import { withRouter } from "react-router-dom";

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

Semplice come quella!

I param vengono trasmessi attraverso oggetti di scena sull'oggetto partita.

props.match.params.yourParams

fonte: https://redux.js.org/advanced/usage-with-react-router

Ecco un esempio dai documenti che distruggono gli oggetti di scena negli argomenti.

const App = ({ match: { params } }) => {
  return (
    <div>
      <AddTodo />
      <VisibleTodoList filter={params.filter || 'SHOW_ALL'} />
      <Footer />
    </div>
  )
}

Poiché gli hook non funzionano con componenti basati su classi, è possibile racchiuderlo in una funzione e passare le proprietà lungo:

class TaskDetail extends React.Component {
    componentDidMount() {
        const { id } = this.props.params;
        // ...
    }
}

export default (props) => (
    <TaskDetail
        {...props}
        params={useParams()}
    />
);

Ma, come ha detto @ michael-mayo, mi aspetto che questo sia ciò che withRoutersta già suonando.

Non è possibile chiamare un hook come "useParams ()" da un React.Component.

Il modo più semplice se si desidera utilizzare gli hook e disporre di un componente React.com esistente è creare una funzione, quindi chiamare il componente React.Con da quella funzione e passare il parametro.

import React from 'react';
import useParams from "react-router-dom";

import TaskDetail from './TaskDetail';

function GetId() {

    const { id } = useParams();
    console.log(id);

    return (
        <div>
            <TaskDetail taskId={id} />
        </div>
    );
}

export default GetId;

Il tuo percorso di commutazione sarà ancora qualcosa di simile

<Switch>
  <Route path="/task/:id" component={GetId} />
</Switch>

allora sarai in grado di ottenere l'ID dagli oggetti di scena nel tuo componente di reazione

this.props.taskId

Prova qualcosa del genere

import React from "react";
import { useParams } from "react-router-dom";

class TaskDetail extends React.Component {
let { id='' } = useParams();
    componentDidMount() {
        this.fetchData(id);
    }

    fetchData = id => {
        // ...
    };

    render() {
        return <div>Yo</div>;
    }
}

export default TaskDetail;

Con il router di reazione 5.1 è possibile ottenere l'id con quanto segue:

<Switch>
  <Route path="/item/:id" component={Portfolio}>
    <TaskDetail />
  </Route>
</Switch>

e il componente che può accedere all'ID:

import React from 'react';
import { useParams} from 'react-router-dom';

const TaskDetail = () => {
  const {id} = useParams();
    return (
      <div>
        Yo {id}
      </div>
    );
};