React Router 如何传递参数？

Question

有以下的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'));
});

我试图在一个子组件中构建动态链接，下面是我的一个测试

<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>

但是点击链接时，propId没有传递，请问我做错了什么？

- fefe

Answer 1

为了使其正常工作，您需要在组件的属性中使用路由名称，否则路由器将无法确定您的意图并因此不知道如何处理参数。请注意保留HTML标记。

首先，定义您的路由名称。

<Route name="property" path="property/:propId" handler={PropertyDetail}/>

然后在生成链接时使用名称：

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

- jedrzej.kurylo

---

我相信在1.0+版本中已经删除了命名路由。 - Con Antonakos

我按照您的建议得到了这个警告信息：“<a>”标签上未知的属性“params”。请从元素中删除此属性。 - andrux90210