react-router-dom useParams () di dalam komponen kelas

Saya mencoba memuat tampilan detail berdasarkan rute react-router-dom yang harus mengambil parameter URL (id) dan menggunakannya untuk mengisi komponen lebih lanjut.

Rute saya terlihat /task/:iddan komponen saya dimuat dengan baik, sampai saya mencoba mengambil: id dari URL seperti ini:

    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;

Ini memicu kesalahan berikut dan saya tidak yakin di mana menerapkan dengan benar useParams ().

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

Dokumen hanya menunjukkan contoh berdasarkan komponen fungsional, bukan berbasis kelas.

Terima kasih atas bantuan Anda, saya baru bereaksi.

Anda dapat menggunakannya withRouteruntuk mencapai ini. Cukup bungkus komponen Anda yang sudah diekspor di dalamnya withRouterdan kemudian Anda bisa menggunakan this.props.match.params.iduntuk mendapatkan parameter alih-alih menggunakan useParams(). Anda juga bisa mendapatkan location, matchatau historyinformasi dengan menggunakan withRouter. Mereka semua lewat di bawahthis.props

Menggunakan contoh Anda akan terlihat seperti ini:

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

Sederhana seperti itu!

Params diturunkan melalui alat peraga pada objek pertandingan.

props.match.params.yourParams

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

Berikut adalah contoh dari dokumen yang merusak props dalam argumen.

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

Karena kait tidak akan berfungsi dengan komponen berbasis kelas, Anda dapat membungkusnya dalam suatu fungsi dan meneruskan properti-properti tersebut:

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

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

Tapi, seperti kata @ michael-mayo, saya berharap ini adalah apa withRouteryang sudah dilakukan.

Anda tidak dapat memanggil pengait seperti "useParams ()" dari React.Component.

Cara termudah jika Anda ingin menggunakan hook dan memiliki react.component yang ada adalah membuat fungsi kemudian memanggil React.Component dari fungsi itu dan meneruskan parameter.

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;

Rute peralihan Anda akan tetap seperti itu

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

maka Anda akan dapat memperoleh id dari props di komponen reaksi Anda

this.props.taskId

Coba sesuatu seperti ini

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;

Dengan react router 5.1 Anda bisa mendapatkan id dengan mengikuti:

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

dan komponen Anda daripada yang dapat mengakses id:

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

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