这是他们关于 <Link>
组件 的文档截图。
- 他们指的是什么样的
state
?是Redux
的状态吗? 如何传递一个状态?是像这样吗?
pathname: '/foo', query: { x: this.props.x, }, state: store.getState()
这是他们关于 <Link>
组件 的文档截图。
state
?是 Redux
的状态吗?如何传递一个状态?是像这样吗?
pathname: '/foo',
query: {
x: this.props.x,
},
state: store.getState()
这是一条您希望发送到下一页的信息。与Redux无关,它是一个普通对象。我相信Flipkart是如何使用它来提高用户体验的很好的例子:
您会看到转换发生得非常快速,并且产品页面上的产品图片、标题、评分和价格等信息可以立即获得。实现这种效果的一种方法是将它们在搜索页面上已经加载的状态传递到下一个页面:
<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: { ... } }
}
}
通过连接(Link)有两种方法可以将数据从一个路由传递到另一个路由。
当路由参数包含字符串时,URL参数很有用,例如我们想路由到一个特定的个人资料:
<Link to='/azheraleem'>访问个人资料</Link>
然而,后者即状态(state)帮助我们传递更复杂的数据结构(对象/数组)从一个路由到另一个路由。 根据React Router的文档,关于从一个路由传递数据到另一个路由,可以按照以下代码示例进行:
<Link
to={{
pathname: "/profile",
search: "?name=azheraleem",
state: { fromDashboard: true }
}}
/>
import { useLocation } from "react-router";
const profile() => {
let data = useLocation();
console.log(data.state.fromDashboard);
}
to
属性中的state
属性是History
DOM对象的pushState
方法的参数,该方法在此处有描述。push
/replace
方法中使用了这些props,如此处所述,用于转到新的URL并在浏览器历史记录中添加一个新条目。router.push('/users/12')
// or with a location descriptor object
router.push({
pathname: '/users/12',
query: { modal: true },
state: { fromDashboard: true }
})
这里还提到了这里:
router.push(path)
router.push({ pathname, query, state }) // new "location descriptor"
router.replace(path)
router.replace({ pathname, query, state }) // new "location descriptor"
to
prop的属性。请参见OP图片。 - Chrisstate
是一个属性,它是您可以提供给<Link>
组件的to
属性的对象的一部分。
如果您想要将数据从当前视图发送到<Link>
指向的视图,而不使用常见的技术,如设置URL参数或使用库(如Redux
),则它特别有用。
关于state
键没有太多官方信息,但这是我在该组件的源代码中找到的:
链接可以通过状态/查询字符串参数传递位置状态和/或查询字符串参数 在状态/查询道具中,分别。
因此,基本上就像从父组件向组件发送道具。在这里,您正在从当前视图发送“状态”到目标视图。仅此而已。
state
也没有从表单的propTypes
声明中删除,但似乎state
没有被使用或者它的使用不太清楚。 - oklas简单来说,在<Link/>
组件中使用状态是通过路由以对象的形式在不同视图之间传递信息。在另一页上,可以使用prop.location.state
访问它。
(注意:在浏览器刷新时,状态不再包含信息)
要在Link中传递状态:
<Link to={{pathname: "/second_page", state: {id: 123}}} />
访问第二个页面视图中的id:
let id = props.location.state.id;
更多链接属性请参考:React Router Link
react-router
本身不知道redux
。react-router-redux
知道redux
。 - oklas