无法使用 Link 组件传递状态。为啥状态未定义？ [复制]

Posted 2023-02-21

【中文标题】无法使用 Link 组件传递状态。为啥状态未定义？ [复制]

【英文标题】：Can't pass state with Link compoment. Why is state undefined? [duplicate]无法使用 Link 组件传递状态。为什么状态未定义？ [复制]

【发布时间】：2019-08-08 17:27:40

【问题描述】：

我正在尝试学习“react-router”，我正在做一个应用程序，它有一个输入字段，为您提供一个下拉列表，其中包含指向欧洲各个火车站的链接，当您单击该链接时，它将呈现一个组件，在本例中为 Station 组件并显示有关该站的更多详细信息。

对于这个应用程序，我必须对外部 API 进行两次调用。第一个是找到火车站并将它们显示在下拉列表中。这很有效，从那里我可以获得电台的名称并将其放入下拉列表中，我还可以获得一个id，我将使用它来查询第二个 API 以获取电台的详细信息。当用户点击下拉菜单中的电台时，就会发生这种情况。这现在有效。我的问题是，当用户单击下拉菜单中的电台时，我已经丢失了电台的名称。我想以某种方式将其传递给 Station 组件。

这是我的 Station 组件：

const Station = (props) => 
 return (
  <h1>Station name: props.location.state.name</h1>
 )


export default Station;

这里是 Dropdown 组件，为简单起见，我硬编码了两个站点以尝试使其工作，否则下拉列表是与用户查询匹配的站点列表。

const Dropdown = (props) => 

return (
<ul>
  <li>
    <Link to='/station/London' key="lon" state=name: 'London Central Station'>London </Link>
  </li>
  <li>
    <Link to='/station/Paris' key="par" state=name: 'Paris Central Station'>Paris</Link>
  </li>
</ul>
  )
  

export default Dropdown;

我尝试在Link 组件中使用state 属性传递电台名称，但是当Station 组件挂载时，props.location.state 未定义。

最后是我的路线：

const Details = (props) => 
return (
    <Switch>
      <Route exact path='/' component=Home />
      /* <Route path='/station/:id' render=(props) => (<Station ...props data=props/>) /> */
      <Route path='/station/:id' component=Station />
    </Switch>
    )
   

export default Details;

在这个组件中，我尝试了两种传递道具的方法，但我仍然无法使其工作。我想出的唯一解决方案是

再次调用 API 以再次获取电台名称，这不是最佳的 从下拉列表中保存名称并在单击时设置名称，然后更新父组件的状态并将其传递给 Station 组件，当我知道如何通过时，这也不是最佳解决方案直接来自Link 组件的参数。

【参考方案1】：

根据文档，state 组件本身没有 state 属性，但有一个 state 键作为 to 属性的一部分：

<Link
  to=
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state:  fromDashboard: true 
  
/>

来源：https://reacttraining.com/react-router/web/api/Link/to-object

【讨论】：

不敢相信。就是这样。我什至没有注意到它，我猜有隧道视野。感谢您指出。

在区域内轻松完成 :)