React Router passing params. How to?

Question

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 try to build dynamic links inside of 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 link the propId is not getting passed, what I do wrong?

Answer 1

In order for that to work you need to use the route name in the to property of Link component, otherwise router can't 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 generating the link:

<Link to="/property/:propId" params={{ propId: "123"}} >