无法使用 Link 组件传递状态。为什么状态未定义？

Question

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

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

这是我的车站组件：

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

export default Station;

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

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;

我尝试使用组件state中的 prop传递站名称Link，但是当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组件。

Answer 1

根据文档，组件本身没有stateprop Link，但有一个statekey 作为toprop 的一部分：

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

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