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'));
});

我尝试在子组件中构建动态 links，这里我有一个测试

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

但是点击 link propId 没有通过，我做错了什么？

Answer 1

为了使其正常工作，您需要在 to 属性 of Link[=21 中使用路由名称=] 组件，否则路由器无法知道您指的是哪个路由定义，因此无法知道如何处理 propId 参数。

首先，为您的路线定义一个名称

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

然后在生成link时使用名称：

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

React Router 传递参数。如何？

React Router passing params. How to?

reactjs

params

react-router