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>
)
}
}
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
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).
remplacez ceci:
<Route path={"product/:id"} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route>
avec :
<Route path={"product/:id"} component={DetailsProduct}></Route>
réagir routeur nouvelle version a modifié l'objet prop route comme suit: this.props.match.params
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>