如何将额外的道具传递到新页面 <Link> 用React-Router？

Question

我有一个新页面，该页面通过<Link>呈现和访问，正在传递给bookName和bookEdition 。 这很好，很好。

<Router history={browserHistory}>
    <Route path="/" component={App}/>
    <Route path="/book/:bookName/:bookEdition" component={Book}/>
</Router>

<Link to={"/book/ReactJS For Dummies/1st Edition"}><p>Link here</p></Link>

但是，我想通过道具或其他方式将有关该书的其他上下文数据以及在该书中找到的搜索结果传递到新页面。 我已经尝试过类似的事情，但没有成功：

<Link to={"/book/ReactJS For Dummies/1st Edition"} params={{hits:hit}}><p>Link here</p></Link>

我知道我可以将其他数据添加到<Route>组件中，如hits={hit} ，但这超出了我需要传递的数据的范围。 它必须通过<Link>所在的地方传递。

Answer 1

您应用中的路由器不适用于传递此类数据。 我的经验告诉我，这是一种不好的方法。 如果您的应用程序需要将信息从一页转移到另一页，则URL绝对不是一个好地方。 它根本无法扩展。 我猜您正在使用flux（或redux），因此请在您的应用程序状态下管理该用例。 调度专用操作并保留该数据，以便以后使用。

Answer 2

您可以将这些其他道具作为查询参数传递。

<Link to={"/book/ReactJS For Dummies/1st Edition"} query={{hits: hits}}><p>Link here</p></Link>

然后，您可以从this.props.location.query访问Book组件内的这些值。

更新

由于在React-Router v2中已弃用将查询参数作为query道具传递，因此您可以这样传递它：

<Link to={{ pathname: "/book/ReactJS For Dummies/1st Edition", query: {hits: hits} }}><p>Link here</p></Link>