Paweł Baca Paweł Baca - 8 days ago 4
React JSX Question

React this.props.params undefined

I have problem with pass id to my page with product, i try eveything and search answer but it still dont work.

Here is my index.js:

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


And DetalisProduct
(page: http://localhost:8080/#/product/1)

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

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

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

Answer

replace this :

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

with :

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