react-router-dom useParams () ภายในคอมโพเนนต์คลาส

ฉันกำลังพยายามโหลดมุมมองรายละเอียดตามเส้นทาง react-router-dom ที่ควรคว้าพารามิเตอร์ URL (id) และใช้เพื่อเติมองค์ประกอบเพิ่มเติม

เส้นทางของฉันดูเหมือน/task/:idและส่วนประกอบของฉันโหลดได้ดีจนกระทั่งฉันพยายามคว้า: id จาก URL ดังนี้:

    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.

เอกสารแสดงเฉพาะตัวอย่างตามส่วนประกอบที่ใช้งานได้ไม่ใช่ตามคลาส

ขอบคุณสำหรับความช่วยเหลือของคุณฉันใหม่เพื่อตอบสนอง

คุณสามารถใช้withRouterเพื่อทำสิ่งนี้ให้สำเร็จ เพียงแค่ห่อส่งออกประเภทภายในองค์ประกอบของคุณwithRouterแล้วคุณสามารถใช้เพื่อให้ได้ค่าพารามิเตอร์แทนการใช้this.props.match.params.id useParams()นอกจากนี้คุณยังสามารถรับได้location, matchหรือข้อมูลโดยใช้history withRouterพวกเขาทั้งหมดถูกส่งผ่านภายใต้this.props

ใช้ตัวอย่างของคุณมันจะเป็นดังนี้:

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

ง่ายเหมือนที่!

Params จะถูกส่งผ่านไปยังอุปกรณ์ประกอบฉากบนวัตถุที่ตรงกัน

props.match.params.yourParams

แหล่งที่มา: https://redux.js.org/advanced/usage-with-react-router

นี่คือตัวอย่างจากเอกสารที่ทำลายอุปกรณ์ประกอบฉากในการโต้แย้ง

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

เนื่องจาก hooks จะไม่ทำงานกับส่วนประกอบที่ใช้ในคลาสคุณจึงสามารถสรุปได้ในฟังก์ชั่นและผ่านคุณสมบัติไปตาม:

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

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

แต่อย่างที่ @ michael-mayo กล่าวว่าฉันคาดหวังว่านี่คือสิ่งที่withRouterกำลังดำเนินการอยู่

คุณไม่สามารถเรียกเบ็ดได้เช่น "useParams ()" จาก React.Component

วิธีที่ง่ายที่สุดถ้าคุณต้องการใช้ hooks และมี react.component ที่มีอยู่แล้วคือการสร้างฟังก์ชั่นจากนั้นเรียกใช้ React.Component จากฟังก์ชั่นนั้นและส่งผ่านพารามิเตอร์

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;

เส้นทางการเปลี่ยนของคุณจะยังคงเป็นเช่นนั้น

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

จากนั้นคุณจะสามารถรับไอเท็มจากอุปกรณ์ประกอบฉากในองค์ประกอบการตอบโต้ของคุณ

this.props.taskId

ลองอะไรเช่นนี้

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;

ด้วย react 5.1 เราเตอร์คุณจะได้รับรหัสดังต่อไปนี้:

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

และส่วนประกอบของคุณเกินกว่าที่จะสามารถเข้าถึงรหัส:

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

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