Modify router traversal parameters. How?
Having the following React Router
const AppRoutes = (
<Route path="/" handler={Properties}>
<DefaultRoute handler={PropertyList} />
<Route path="property/:propId" handler={PropertyDetail}/>
<NotFoundRoute handler={NotFound} />
</Route>);
Router.run(AppRoutes, Router.HashLocation, (Root) => {
React.render(<Root />, document.getElementById('filter-content'));
});
I am trying to build dynamic links inside a child component and here I have a test
<Link to="/property/" params={{ propId: "123"}} ><img src={this.props.data.picture}
data-srcset="http://placehold.it/350x150" alt="" className="lazyload auto-height"
data-sizes="auto"/>
</Link>
but clicking on the propId link fails, what am I doing wrong?
+3
source to share
1 answer
To do this, you need to use the route name in the property before the Link component , otherwise the router cannot know which route definition you mean and therefore what to do with the propId parameter .
First define a name for your route
<Route name="property" path="property/:propId" handler={PropertyDetail}/>
and then use the name when creating the link:
<Link to="/property/:propId" params={{ propId: "123"}} >
+7
source to share