How to pass extra props to new page through <Link> with React-Router?

Question

I have a new page that's rendered and accessed through a <Link> that's being passed a bookName and bookEdition . This works fine, great.

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

However, I want to pass additional context data about the book and the search results it was found in to the new page, through a prop or something. I've tried something like this to no avail:

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

I know I can add additional data to the <Route> component, as hits={hit} , but that's out of scope for the data that I need to pass through. It needs to be passed through where the <Link> exists.

Answer 1

The router in your app is not designed for passing such data. My experience shows me that this is a bad approach. If you are app needs to transfer information from one page to another the URL is definitely not a good place for that. It simply doesn't scale. I guess you are using flux (or redux) so manage that use case in your app state. Dispatch a dedicated action and keep that data so you can consume it later.

Answer 2

You can pass those additional props as query parameters.

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

You can then access these values inside your Book component from this.props.location.query

Update

Since passing query params as query prop has been deprecated in React-Router v2, you can instead pass it like this:

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