React Router v4 params
I am following a React tutorial which uses React Router v3. So far I am using React Router v4. I am passing a parameter named id
from a named component Root
to another named component User
.
export class Root extends React.Component {
render() {
return(
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Header />
</div>
</div>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/user/:id" component={User}/>
<Route path="/home" component={Home}/>
{/*{this.props.children}*/}
</div>
</div>
</div>
);
}
}
And I am picking up the parameter {this.props.match.params.id}
as below and it works.
export class User extends React.Component {
onNavigateHome() {
this.props.history.push("/home")
}
render() {
return (
<div>
<h3>The User Page</h3>
<p>User ID: {this.props.match.params.id}</p>
<button onClick={() => this.onNavigateHome()} className="btn btn-primary">Go home!</button>
</div>
);
}
}
The tutorial {this.props.params.id}
uses. Am I doing it right with {this.props.match.params.id}
? What does it mean match
?
source to share
Matching is a property that reacts to v4 router when the route path matches.
The correspondence object has the following properties:
- url - the matched portion of the current location of pathname
- path - route route
- isExact-path === pathname
- params - an object containing values from the pathname that were captured along the path to the regex
Regarding the next V3 tutorial from V4 - I would not recommend it as there are significant changes between the two versions
source to share