<Link>中的状态是什么?反应路由器的组件?

问题描述

这是他们关于

1. state 是什么意思?Redux 状态?

2. 传递一个状态是什么感觉?像这样吗?

    路径名:'/foo',询问: {x: this.props.x,},状态:store.getState()

解决方案

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

• 转到 Flipkart 搜索页面 在移动设备上(或使用 Chrome DevTools 模拟)
• 点击其中一项

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

然后:

function ProductPage(props) {//总是检查，因为第一次访问时状态为空如果(道具.位置.状态.产品){console.log(props.location.state.product);//{ id: '...', images: [...], price: { ... } }}}

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

解决方案

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

这篇关于<Link>中的状态是什么?反应路由器的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！