React this.props.params undefined

后端 未结 6 1202
名媛妹妹
名媛妹妹 2021-02-07 03:15

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:

impor         


        
相关标签:
6条回答
  • 2021-02-07 03:51

    replace this :

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

    with :

    <Route path={"product/:id"} component={DetailsProduct}></Route>
    
    0 讨论(0)
  • 2021-02-07 03:57

    I was also getting the same problem when I used this.props.params.id.

    But when i tried to put console.log(this.props) in the component where I'm passing the id, it shows my id in match object so use:

    this.props.match.params.id
    

    to get the id (notice the added match).

    0 讨论(0)
  • 2021-02-07 03:57

    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

    0 讨论(0)
  • 2021-02-07 03:59

    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

    0 讨论(0)
  • 2021-02-07 04:03

    react router new version changed the route props object as the following: this.props.match.params instead this.props.params

    https://reacttraining.com/react-router/web/api/match

    0 讨论(0)
  • 2021-02-07 04:04

    I assume you are not using react-router v4 but either v2.x.x or v3.x.x. In that case you should restructure your routes and you can pass multiple component using the components props as

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

    And in the Menu Component Also the way you want it work is relatively very easy to do using react-router v4. In that case you can make use of prop render to provide a component and you could do the following with it

    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>
    
    0 讨论(0)
提交回复
热议问题