React Router 的 组件中的状态是什么?

2024-04-15

这是他们的文档的屏幕截图<Link> 成分 https://i.stack.imgur.com/qt5zs.png

  1. What state他们是什么意思? ARedux state?
  2. 通过一个州是什么样子的?像这样?

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

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

  • Go to a 在移动设备上(或使用 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: { ... } }
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Router 的 组件中的状态是什么? 的相关文章

随机推荐