Question

以下是他们关于<Link> component

的文档的屏幕截图

state是什么意思？一个Redux州？

传递状态怎么样？喜欢这个？

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

Answer 1

state道具的to属性是pushState DOM对象described here的History方法的参数

路由器as described here的push / replace方法中使用的道具转换为新网址，在浏览器历史记录中添加新条目，如下所示：

router.push('/users/12')

// or with a location descriptor object
router.push({
  pathname: '/users/12',
  query: { modal: true },
  state: { fromDashboard: true }
})

它还提到了here：

router.push(path)
router.push({ pathname, query, state }) // new "location descriptor"

router.replace(path)
router.replace({ pathname, query, state }) // new "location descriptor"

Answer 2

state是您可以提供给to组件的<Link>道具的对象的一部分。

如果您希望将当前视图中的数据发送到<Link>引导您的数据，而不使用常用技术（如设置网址参数或使用Redux等库），则此功能非常有用。

关于state密钥的官方信息并不多，但我在该组件的源代码中找到了这些信息：

链接可以传递位置状态和/或查询字符串参数分别在州/查询道具中。

所以基本上，就像从父母那里向组件发送道具一样。在这里，您正在发送＆＃34;州＆＃34;从当前视图到目标视图。关于它，真的。

Answer 3

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

在移动设备上转到Flipkart search page（或使用Chrome DevTools模拟一个）
点击其中一项

您会看到过渡是立即发生的，并且产品页面上可以轻松获得诸如产品图片，标题，等级和价格之类的信息。一种实现方式是将他们已经在搜索页上加载的状态传递到下一个状态：

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

然后：

function ProductPage(props) {
  // Always check. If the user reloads the page, this key won't exist
  if (props.location.state.product) {
    console.log(props.location.state.product);
    // { id: '...', images: [...], price: { ... } }
  }
}

Answer 4

在<Link/>组件中的简单状态下，用于通过路由器以对象的形式将信息从一个视图传递到另一视图。在另一页上，可以使用prop.location.state进行访问。

（注意：在浏览器刷新状态下，不再包含信息）

通过链接传递状态：

<Link to={{pathname: "/second_page", state: {id: 123}}} />

要在第二个页面视图中访问ID，请执行以下操作：

let id = props.location.state.id;

有关更多链接属性：React Router Link

React Router的<link />组件中的状态是什么？

4 个答案: