What is a state in <Link> component of React Router?

Question

Here is a screenshot from their docs about <Link> component

1. What state do they mean? A Redux state?

2. How does it look like to pass a state? Like this?

       pathname: '/foo',
       query: {
           x: this.props.x,
       },
       state: store.getState()
   

Answer 1

It's a piece of information that you'd like to send to the next page. Nothing to do with Redux. It's a plain object. I believe Flipkart is a very nice example of how it can be used to improve user experience:

• Go to a Flipkart search page on a mobile device (or simulate one using Chrome DevTools)
• Tap on one of the items

You'll see that the transition happens instantly and pieces of information like product images, title, rating and price are readily available on the product page. One way to implement that is passing the state they had already loaded on the search page onto the next one:

<Link
  to={`/product/${id}`}
  state={{
    product,
  }}
/>

And then:

function ProductPage(props) {
  // Always check because state is empty on first visit
  if (props.location.state.product) {
    console.log(props.location.state.product);
    // { id: '...', images: [...], price: { ... } }
  }
}