我正在尝试学习"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;
我尝试在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组件传递参数时，这也不是最佳解决方案。
根据文档，Link组件本身没有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