无法使用链接组件传递状态。为什么国家没有定义？

Can#39;t pass state with Link compoment. Why is state undefined?(无法使用链接组件传递状态。为什么国家没有定义？)

问题描述

我正在尝试学习‘Reaction-Router’，我正在做一个应用程序，它有一个输入字段，给你一个下拉列表，其中包含指向欧洲各种培训机构的链接，当你点击该链接时，它将呈现一个组件，在本例中为Station组件，并显示有关该站的更多详细信息。

对于该应用程序，我必须对外部API进行两次调用。第一种方法是找到训练实例并将其显示在下拉列表中。这是可行的，从那里我可以获得站点的名称并将其放在下拉列表中，我还将获得一个id，我将使用它来查询第二个API以获取站点的详细信息。当用户点击下拉菜单中的站点时，就会发生这种情况。现在这招很管用。我的问题是，当用户点击下拉菜单中的电台时，我已经忘记了电台的名称。我想以某种方式把它传给空间站的部件。

这是我的站点组件：

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时，props.location.state未定义。

最后是我的路线：

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