मैं पिछले 2 दिनों से रिएक्ट सीख रहा हूं, और मुझे यूआरएल पैरामीटर को समझने में परेशानी हो रही है।

मान लें कि मुझे एक मार्ग चाहिए mysite.com/details/1023। मार्ग की तरह परिभाषित किया गया है:

<Route path="/details/:id" render={() => <DishDetails />}/>

अब मैं चाहता हूं कि DishDetails ऑब्जेक्ट, जिसे किसी अन्य फ़ाइल में परिभाषित किया गया है, id मान 1023 का उपयोग करने में सक्षम हो। मैं यह कैसे कर सकता हूँ? मुझे मार्ग url params पर ट्यूटोरियल मिले हैं, लेकिन कोई भी यह नहीं बताता है कि इसे कैसे प्राप्त किया जाए।

यहाँ मेरा DishDetails दृश्य इस समय कैसा दिखता है:

import React, {Component} from "react";
import "./DishDetails.css";
import {Link} from "react-router-dom";

class DishDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: /*url param*/,
        };
    }
    render() {
        return this.state.id;
    }
}

export default DishDetails;

DishDetails में मुझे id कहां मिल सकता है? मैंने कोशिश की:

import React, {Component} from "react";
import "./DishDetails.css";
import {Link} from "react-router-dom";

class DishDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: match.id,
        };
    }
    render() {
        return this.state.id;
    }
}

लेकिन match अपरिभाषित है।

2
Sahand 29 मार्च 2018, 18:09

3 जवाब

सबसे बढ़िया उत्तर

कंपोनेंट प्रॉप्स के ज़रिए अपने कंपोनेंट को Route पर पास करें:

<Route path="/details/:id" component={DishDetails} />

अगर आपने ऐसा किया है तो match प्रॉप्स में उपलब्ध है।

यदि आपको अपने मार्गों को प्रस्तुत करने का तरीका रखना है तो आप अपने घटक को मैन्युअल रूप से रेंडर प्रोप पास कर सकते हैं:

<Route path="/details/:id" render={(props) => <DishDetails {...props} />}/>

आप प्रतिक्रिया-राउटर के लिए संपूर्ण दस्तावेज़ यहां पा सकते हैं।

2
floriangosse 29 मार्च 2018, 15:14

क्या आपने रिएक्ट-राउटर के साथ आने वाले withRouter फंक्शन को आजमाया है?

import { withRouter } from 'react-router'

class App extends Component {
   .... your stuff
}

export default withRouter(App);

इससे आपको "मैच" प्रोप . तक पहुंच मिलनी चाहिए

-1
Blake Guilloud 29 मार्च 2018, 15:14

<Route render> प्रॉप को राउटर प्रॉप्स:

  • match
  • location
  • history

आपको उस प्रॉप को <DishDetails> घटक को प्रदान करना होगा और अपने path="/details/:id" से id को पुनः प्राप्त करने के लिए match.params.id का उपयोग करना होगा।

const DishDetails = props => <div>Details Id: {props.match.params.id}</div>;

<Route path="/details/:id" render={props => <DishDetails {...props} />} />

आपके उदाहरण में यह रूट प्रॉप्स है:

{
    match: { path: '/details/:id', url: '/details/1', isExact: true, params: { id: '1' } },
    location: { pathname: '/details/1', search: '', hash: '' },
    history: { length: 3, action: 'POP', location: { pathname: '/details/1', search: '', hash: '' } }
}

<Route> के साथ कुछ रेंडर करने के 3 तरीके हैं:

  • <Route component>
  • <Route render>
  • <Route children>

अधिक पढ़ें यहां< /ए>

1
Community 20 जून 2020, 09:12