react-router - React Router 的 <Link> 组件中的状态是什么？

Question

这是他们关于 <Link> 的文档的截图component

什么 state他们是什么意思？一个 Redux状态？

通过状态看起来如何？像这样？

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

Answer 1

这是您想要发送到下一页的信息。与 Redux 无关。这是一个简单的对象。我相信 Flipkart 是一个很好的例子，说明如何使用它来改善用户体验:

转至 Flipkart search page在移动设备上(或使用 Chrome DevTools 模拟)

点击其中一项

您会看到转换立即发生，产品图片、标题、评级和价格等信息在产品页面上随时可用。一种实现方法是将他们已经在搜索页面上加载的状态传递到下一个页面:

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

进而:

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: { ... } }
  }
}