React this.props.params undefined

user_6209704 0
Viewed 67013

I have problem passing id to my page with product, I tried everything and search answer but it still doesn't 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 DetailsProduct (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>
        )
    }
}

I came back here after a 3 years. Solution:

Rendering components in this way is not a good solution:

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

But if you want to render a component like this (which I do not recommend) you have to add props as param argument to the function and then make restructuring on the component in which you want that props({...props})

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

Best solution is render route like this:

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

and inside DetailsProduct you can render <Menu /> or use Switch :

<Menu/>
<Switch>
    <Route exact path={"product/:id"} component={DetailsProduct}/>
    // Add any other routes you want here
</Switch>
react-router reactjs javascript
8 Answers

For me I was using the render method and finding that this.props.match was undefined in rendered components. This was the solution for me, you have to pass in props.

this.props.match will be undefined for:

<Route path='/users/:id' render={() => <UserDetail/>}/>

Do this instead:

<Route path='/users/:id' render={(props) => <UserDetail {...props}/>}/>

https://reacttraining.com/react-router/web/api/Route/render-func

user_38662460
user_54836870

In the new version you have to use

useParams()

instead

this.props.params
user_180884730

I use 

import { Router, Route, browserHistory, IndexRoute} from 'react-router'

and

import {syncHistoryWithStore, routerReducer} from 'react-router-redux'

then I can get id by this.props.params.id

user_62097040

I had the same issue when I had this code

<Route
    path={"/:url"}
    render={(routerProps) =>
        <BusinessApps
            {...routerProps}
            {...this.props}
            size={size}
        />
    }/>

I removed {...this.props} to fix the issue.

user_24808690
Related