web-dev-qa-db-fra.com

Réagissez this.props.params undefined

J'ai un problème avec pass id à ma page avec le produit, j'essaye tout et cherche réponse mais cela ne fonctionne toujours pas.

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

Et 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>
        )
    }
}
javascriptreactjsreact-router
9
Paweł Baca

J'utilise 

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

et

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

alors je peux obtenir l'identifiant par this.props.params.id

0
Paweł Baca

J'avais aussi le même problème quand j'ai utilisé this.props.params.id.

Mais quand j'ai essayé de mettre console.log(this.props) dans le composant où je passe l'identifiant, il montre mon identifiant dans match object alors utilisez:

this.props.match.params.id

pour obtenir l'id (notez la match ajoutée).

14
rajat

remplacez ceci:

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

avec :

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

réagir routeur nouvelle version a modifié l'objet prop route comme suit: this.props.match.params

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

2
Mahmoud Ahmed

Je suppose que vous n'utilisez pas react-router v4 mais soit v2.x.x ou v3.x.x. Dans ce cas, vous devez restructurer vos itinéraires et vous pouvez transmettre plusieurs composants à l'aide de components props comme

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

Et dans le composant Menu De plus, la façon dont vous le souhaitez est relativement facile à utiliser avec react-router v4. Dans ce cas, vous pouvez utiliser prop render pour fournir un composant et effectuer les opérations suivantes avec celui-ci.

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>
1
Shubham Khatri