प्रतिक्रिया-राउटर-डोम उपयोग () वर्ग घटक के अंदर

Question

मैं एक प्रतिक्रिया-राउटर-डोम मार्ग के आधार पर एक विवरण दृश्य को लोड करने की कोशिश कर रहा हूं जो URL पैरामीटर (आईडी) को पकड़ना चाहिए और उस घटक को आगे बढ़ाने के लिए उपयोग करना चाहिए।

मेरा मार्ग कैसा दिखता है /task/: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;

यह निम्नलिखित त्रुटि को ट्रिगर करता है और मैं अनिश्चित हूं कि कहां से सही ढंग से उपयोगपराम () को लागू किया जाए।

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

डॉक्स केवल कार्यात्मक घटकों के आधार पर उदाहरण दिखाते हैं, वर्ग आधारित नहीं।

आपकी मदद के लिए धन्यवाद, मैं प्रतिक्रिया के लिए नया हूं।

Comments

हुक कक्षा आधारित घटकों में काम नहीं करते

— डुप्कोस

@Dupocas ठीक है जो समझ में आता है। आप क्या सुझाव देंगे, कक्षा को किसी फ़ंक्शन में फिर से लिखें या कक्षा का उपयोग करें और url पैरामीटर को किसी अन्य तरीके से हथियाने की कोशिश करें?

— जोर्रे

दोनों वैध विकल्प। आप के लिए कोड पोस्ट कर सकते हैं useParams? शायद इसे एक में बदल दें HOC?

— दुपोकस

Answer 1

आप इसे 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);

इतना ही आसान!

Comments

कृपया इस उत्तर को सही अंकित करें।

— सैमुअल कोनट

Answer 2

मैच ऑब्जेक्ट पर प्रॉम्प्स के माध्यम से परमेस पास हो जाते हैं।

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

Answer 3

चूंकि हुक वर्ग आधारित घटकों के साथ काम नहीं करते हैं इसलिए आप इसे एक फ़ंक्शन में लपेट सकते हैं और गुणों को पास कर सकते हैं:

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

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

लेकिन, जैसे @ माइकल-मेयो ने कहा, मुझे उम्मीद है कि यह वही है जो withRouterपहले से ही प्रदर्शन कर रहा है।

Answer 4

आप एक React.Component से "useParams ()" जैसे हुक को कॉल नहीं कर सकते।

सबसे आसान तरीका अगर आप हुक का उपयोग करना चाहते हैं और एक मौजूदा react.com है एक फ़ंक्शन बनाने के लिए है तो उस फ़ंक्शन से 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

Answer 5

कुछ इस तरह की कोशिश करो

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;

Answer 6

प्रतिक्रिया राउटर 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>
    );
};