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

Question

这是他们的文档中有关组件的屏幕截图<Link>

1. 什么state意思 一个Redux状态？

2. 通过状态看起来如何？像这样？

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

Answer 1

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

• 在移动设备上转到Flipkart 搜索页面（或使用 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: { ... } }
  }
}

Answer 2

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

• 网址参数。
• 作为状态。

当路由参数包含字符串时，URL 参数会有所帮助，例如我们想要路由到特定的配置文件： <Link to='/azheraleem'>Visit Profile</Link>

然而，后者（即状态）帮助我们将数据从一个路由传递到另一个路由，这是复杂的数据结构。（对象/数组）。根据反应路由器文档，如果将数据从一个路由传递到另一个路由，可以按照以下代码示例完成：

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

路径名是路由的链接，而搜索属性包含查询字符串参数，因此单击链接时，URL 将形成类似：http://localhost:3000/profile?name=azheraleem。

但是可以使用 useLocation 钩子在被调用的路由中访问状态变量值：

import { useLocation } from "react-router";

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

Answer 3

stateprop的属性是这里描述的DOM对象的方法to的参数pushStateHistory

此处描述的路由器的push/方法中使用的 props用于转换到新的 URL，在浏览器历史记录中添加一个新条目，如下所示：replace

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"

Answer 4

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

如果您想要将数据从当前视图发送到<Link>您指示的视图，而不使用设置 URL 参数或使用库（例如Redux.

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

链接可以分别传递 state/query props 中的位置状态和/或查询字符串参数。

基本上，这就像从父组件向组件发送 props 一样。在这里，您将“状态”从当前视图发送到目标视图。确实就是这样。