This.props.params does not exist after passing parameter on react-router
I am passing a parameter from react-router route to component, but in this.props object, 'params' not existing
const routes = (
<Router forceRefresh={true}>
<div>
<Route exact path="/" component={Firstpage}/>
<Route exact path="/projects" component={Projectslist}/>
<Route exact path="/projects/:projectId" component={Singleproject}/>
</div>
</Router>
);
And this is my component:
class Singleproject extends React.Component{
constructor(props) {
super(props);
}
componentWillMount(){
window.document.title = "Wploper | Project title";
}
render(){
return(
<div>
<Mainheader/>
<div id="single-project-container" className="sheet-max-width">
<h2>{this.props.params}</h2>
</div>
<Mainfooter/>
</div>
);
}
}
And the object (this.props) has no parameters: enter image description here
+3
source to share
3 answers
tested for v4 reactive router in Singleproject component you can get the parameters with:
this.props.match.params.projectId
below is a sample code:
class ForgotPassword extends Component {
constructor (props,context){
super(props,context);
this.state={
busy : true,
sessionId : localStorage.getItem('sessionId') || null,
resetKey : this.props.match.params.resetKey || ''
};
console.log(this);
}
}
+5
source to share