如何將額外的道具傳遞到新頁面 <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>