इस पर प्रतिक्रिया दें .props.params अपरिभाषित

Question

मुझे उत्पाद के साथ अपने पृष्ठ पर पास आईडी के साथ समस्या है, मैं eveything कोशिश करता हूं और उत्तर खोजता हूं लेकिन यह अभी भी काम नहीं करता है।

import React from "react"; 
import {render} from "react-dom"; 
import {Router, Route, IndexRoute, hashHistory} from "react-router"; 

import {Menu} from './components/Menu'; 
import {MainPage} from './components/MainPage'; 
import {DetailsProduct} from './components/DetailsProduct'; 

class App extends React.Component{ 

    render(){ 
     return(
     <Router history={hashHistory}> 
      {/* <IndexRoute component={Menu}></IndexRoute> */} 
      <Route path="/" component={()=>(<div><Menu/><MainPage/></div>)}></Route> 
      <Route path={"product/:id"} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route> 
     </Router> 
     ) 
    } 
} 

render(<App/>, window.document.getElementById("app")); 

और DetalisProduct (पेज: http://localhost:8080/#/product/1)

यहाँ मेरी index.js है

import React from "react";  
export class DetailsProduct extends React.Component{ 

    render(){ 
     console.log(this.props.params); <-- this is undefined 

     return(
      <h1>Product</h1> 
     ) 
    } 
} 

Answer 1

इस बदलें:

साथ

<Route path={"product/:id"} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route> 

:

<Route path={"product/:id"} component={DetailsProduct}></Route> 

Answer 2

मुझे लगता है कि आप react-router v4 का उपयोग नहीं कर रहे हैं, लेकिन या तो v2.x.x या v3.x.x। उस मामले में आप अपने मार्गों पुनर्गठन चाहिए और आप के रूप में

<Router history={hashHistory}> 
     <Route path="/" component={Layout}> 
       <IndexRoute components={{menu: Menu, mainPage: MainPage}}/> 
       <Route path={"product/:id"} component={{menu: Menu, detail: DetailsProduct}}/> 
     </Route> 
    </Router> 

और मेनू घटक इसके अलावा में जिस तरह से आप यह चाहते काम अपेक्षाकृत react-router v4 का उपयोग कर ऐसा करने के लिए बहुत आसान है components रंगमंच की सामग्री का उपयोग कर कई घटक पारित कर सकते हैं। उस मामले में आप प्रोप के उपयोग के एक घटक प्रदान करने के लिए रेंडर कर सकता है और आप इसे

import {HashRouter as Router, Route} from 'react-router-dom'; 
... 
<Router> 
    <Route path="/" render={()=>(<div><Menu/><MainPage/></div>)}></Route> 
    <Route path={"product/:id"} render={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route> 
</Router> 

Answer 3

मैं भी एक ही समस्या है जब मैं this.props.params.id इस्तेमाल किया हो रही थी के साथ निम्न कर सकता है।

लेकिन जब मैं घटक जहाँ मैं आईडी गुजर रहा हूँ में console.log(this.props) डालने की कोशिश की, यह पता चलता मैच वस्तु में मेरे आईडी तो उपयोग:

this.props.match.params.id 

आईडी प्राप्त करने के लिए (नोटिस जोड़ा match)।