enter image description here

जब मैं किसी चित्र जैसे लिंक पर क्लिक करता हूं तो मैं गतिशील पथ कैसे कार्यान्वित कर सकता हूं?

उपयोगकर्ता लिंक पर क्लिक करता है और संदेश अनुभाग में जाता है, फिर लिंक (लिंक) पर क्लिक करता है और वांछित घटक पर जाता है।

डेटा:

const data = [
    {
        link: 'Link Name 1',
        text: 'Text 1',
        id: '1'
    },
    {
        link: 'Link Name 2',
        text: 'Text 2',
        id: '2'
    },
    {
        link: 'Link Name 3',
        text: 'Text 3',
        id: '3'
    }
    ];

App.js

<Switch>
 <Route exact path="/" component={AppHome}/>
 <Route exact path="/messages" component={AppMessages}/>
 <Route exact path="/messages/chat" component={AppMessageItems}/>
 <Route exact path="/messages/chat/:id" component={AppMessageItems}/>
</Switch>

Messages.js

const AppMessages = () => {
             <ul>
                {data.map(function(item, index) {
                    return (
                        <li key={index}>
                            <Link to='/messages/chat'><AppMessageUserList {...item} /></Link>
                        </li>);
                })}
            </ul>
}

AppMessageUserList

const AppMessageUserList = ( props ) => {
const {link} = props;
   return ( <div> {link} </div> );

}

AppMessageItems.js

const AppMessageItems = () => {
   return ( <h1> Hello World </h1> );

}

लेकिन जब मैं इस कोड को आजमाता हूं तो लिंक पर क्लिक करने पर मुझे त्रुटि मिलती है।

5
stepbystep 19 फरवरी 2020, 11:11
AppMessageItems पर आईडी पास करने का प्रयास करें जो सटीक पृष्ठ में मैप करने का प्रयास करेगा जिसे आप ढूंढ रहे हैं
 – 
ionMobDev
19 फरवरी 2020, 11:16
त्रुटि क्या है?
 – 
Zunaib Imtiaz
19 फरवरी 2020, 11:18
क्या आप कोड लिख सकते हैं मैं इसे कैसे कर सकता हूं?
 – 
stepbystep
19 फरवरी 2020, 11:19
और AppMessageUserList में क्या है
 – 
Zunaib Imtiaz
19 फरवरी 2020, 11:20
मेरी पोस्ट संपादित करें और AppMessageUserList जोड़ें
 – 
stepbystep
19 फरवरी 2020, 11:22

1 उत्तर

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

अपना कोड बदलें

// App.js
<Switch>
 <Route exact path="/" component={AppHome}/>
 <Route exact path="/messages" component={AppMessages}/>
 <Route path={["/messages/chat", "/messages/chat/:id"]} component={AppMessageItems}/>
</Switch>

// Messages.js
// Assuming item has id and upon clicking the item should change the url

const AppMessages = () => (
  <ul>
    {data.map((item, index) => 
      (
        <li key={item.id}>
          <Link to={`/messages/chat/${item.id}`}>
             <AppMessageUserList {...item} />
           </Link>
         </li>
       )
     }
    </ul>
)


// AppMessageItems

const AppMessageItems = (props) => {
if (props.match.params && props.match.params.id) {
   // return the selected items
 }
// return whatever you wanted to return if nothing is selected 
}

नोट: अनुक्रमणिका का उपयोग कुंजी के रूप में न करें

3
Pushkin 19 फरवरी 2020, 13:00
कोड के लिए धन्यवाद, लेकिन जब मैं <मार्ग पथ = ["/ संदेश/चैट", "/ संदेश/चैट/: आईडी"] घटक = {AppMessageItems}/> टर्मिनल शो त्रुटि "टैग प्रारंभ बंद नहीं है"
 – 
stepbystep
19 फरवरी 2020, 12:41
आपने [ को खो दिया है, यह <Route path=["/messages/chat", "/messages/chat/:id"] component={AppMessageItems}/> होना चाहिए
 – 
Pushkin
19 फरवरी 2020, 12:43
हां, मैं इस तरह का उपयोग कर रहा हूं <मार्ग पथ = ["/ संदेश/चैट", "/ संदेश/चैट/: आईडी"] घटक = {AppMessageItems}/> उदाहरण के साथ ही, लेकिन "टैग प्रारंभ बंद नहीं है"
 – 
stepbystep
19 फरवरी 2020, 12:46
1
मैं पथ = {["/ संदेश/चैट", "/ संदेश/चैट/: आईडी"]} का प्रयास करता हूं और काम करता है
 – 
stepbystep
19 फरवरी 2020, 12:47
हाँ, मैं घुंघराले ब्रेसिज़ से चूक गया {} 😅
 – 
Pushkin
19 फरवरी 2020, 12:48