ক্লাস উপাদানটির অভ্যন্তরে প্রতিক্রিয়া-রাউটার-ডোম ব্যবহারপ্যারাম ()

Question

আমি একটি প্রতিক্রিয়া-রাউটার-ডোম রুটের ভিত্তিতে বিশদ ভিউ লোড করার চেষ্টা করছি যা ইউআরএল প্যারামিটার (আইডি) দখল করে এবং উপাদানটি আরও জনপ্রিয় করতে এটি ব্যবহার করবে।

আমার রুটটি দেখতে দেখতে /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.

ডক্স কেবল শ্রেণিকালীন নয়, কার্যকরী উপাদানগুলির ভিত্তিতে উদাহরণ দেখায় show

আপনার সাহায্যের জন্য ধন্যবাদ, আমি প্রতিক্রিয়া নতুন।

Comments

হুক

— শ্রেণিভিত্তিক

@ দুপোকাস ঠিক আছে যে এটি উপলব্ধি করে। আপনি কী পরামর্শ দেবেন, কোনও ফাংশনে ক্লাসটি পুনর্লিখন করবেন বা কোনও ক্লাস ব্যবহার করবেন এবং অন্য কোনও উপায়ে url প্যারামিটারটি ধরার চেষ্টা করবেন?

— Jorre

উভয় বৈধ বিকল্প। আপনি কি জন্য কোড পোস্ট করতে পারেন 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

আপনি একটি প্রতিক্রিয়া.কমপোয়েন্ট থেকে কোনও হুক যেমন "ইউজপ্যারামস ()" কল করতে পারবেন না।

সবচেয়ে সহজ উপায় যদি আপনি হুক ব্যবহার করতে চান এবং বিদ্যমান রিঅ্যাক্ট.কম্পোনেন্ট চান তবে একটি ফাংশন তৈরি করা উচিত তারপর সেই ফাংশন থেকে রিএ্যাক্ট করুন.কম্পোনেন্টটি কল করুন এবং প্যারামিটারটি পাস করুন।

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