React Router中<Link>组件中的state是什么？

Question

React Router中<Link>组件中的state是什么？

28

这是他们关于 <Link> 组件的文档截图。

他们指的是什么样的 state？是 Redux 的状态吗？

如何传递一个状态？是像这样吗？

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

- Green

“Redux状态？” - react-router本身不知道redux。react-router-redux知道redux。 - oklas

你在下面的答案中找到了有用的吗？ - Chris

这是一个相当清晰的解释：https://tylermcginnis.com/react-router-pass-props-to-link/ - Cog

5个回答

9

通过连接(Link)有两种方法可以将数据从一个路由传递到另一个路由。

URL参数
作为状态(state)

当路由参数包含字符串时，URL参数很有用，例如我们想路由到一个特定的个人资料: <Link to='/azheraleem'>访问个人资料</Link>

然而，后者即状态(state)帮助我们传递更复杂的数据结构(对象/数组)从一个路由到另一个路由。根据React Router的文档，关于从一个路由传递数据到另一个路由，可以按照以下代码示例进行：

<Link
  to={{
    pathname: "/profile",
    search: "?name=azheraleem",
    state: { fromDashboard: true }
  }}
/>

路径名(pathname)是指向路由的链接，而搜索属性(search attribute)包含查询字符串参数(query string parameters)，因此单击链接后，URL将形成类似以下内容： http://localhost:3000/profile?name=azheraleem。

但是，可以使用useLocation Hook在调用的路由中访问状态变量(state variable)的值。

import { useLocation } from "react-router";

const profile() => {
   let data = useLocation();
   console.log(data.state.fromDashboard);
}

- Azher Aleem

状态作为属性不起作用，将其作为对象传递到“to”中可以解决。 - Artem P

1

请注意，这是针对React v5的，v6具有不同的<Link />签名。 - Leland

5

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"

- oklas

OP并不是指props，而是指to prop的属性。请参见OP图片。 - Chris

4

state是一个属性，它是您可以提供给<Link>组件的to属性的对象的一部分。

如果您想要将数据从当前视图发送到<Link>指向的视图，而不使用常见的技术，如设置URL参数或使用库（如Redux），则它特别有用。

关于state键没有太多官方信息，但这是我在该组件的源代码中找到的：

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

因此，基本上就像从父组件向组件发送道具。在这里，您正在从当前视图发送“状态”到目标视图。仅此而已。

- Chris

这条引用信息没有从源代码中删除，state也没有从表单的propTypes声明中删除，但似乎state没有被使用或者它的使用不太清楚。 - oklas

以前它是一个问题，但现在它是您提供给“to”属性的对象的关键。但你说得对。 - Chris

2

简单来说，在<Link/>组件中使用状态是通过路由以对象的形式在不同视图之间传递信息。在另一页上，可以使用prop.location.state访问它。

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

要在Link中传递状态：

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

访问第二个页面视图中的id：

let id = props.location.state.id;

更多链接属性请参考：React Router Link

- nikunj pansuriya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eliseu Monar dos Santos · Accepted Answer

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

在移动设备上（或使用Chrome DevTools模拟）前往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: { ... } }
  }
}