无法通过 Link 组件传递状态。为什么状态未定义?
Can't pass state with Link compoment. Why is state undefined?
我正在努力学习 'react-router',我正在做一个应用程序,它有一个输入字段,可以为您提供带有 link 的下拉菜单,可以前往欧洲的各个火车站,当您点击link 它将呈现一个组件,在本例中为 Station
组件并显示有关车站的更多详细信息。
对于这个应用程序,我将不得不调用两次外部 API。第一个是找到火车站并将其显示在下拉列表中。这行得通,从那里我可以获得车站的名称并将其放入下拉列表中,我还得到一个 id
,我将使用它来查询第二个 API 以获取详细信息车站。当用户点击下拉列表中的电台时,就会发生这种情况。这现在有效。我的问题是当用户点击下拉列表中的电台时,我已经忘记了电台的名称。我想以某种方式将它传递给 Station 组件。
这是我的 Station 组件:
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
我正在努力学习 'react-router',我正在做一个应用程序,它有一个输入字段,可以为您提供带有 link 的下拉菜单,可以前往欧洲的各个火车站,当您点击link 它将呈现一个组件,在本例中为 Station
组件并显示有关车站的更多详细信息。
对于这个应用程序,我将不得不调用两次外部 API。第一个是找到火车站并将其显示在下拉列表中。这行得通,从那里我可以获得车站的名称并将其放入下拉列表中,我还得到一个 id
,我将使用它来查询第二个 API 以获取详细信息车站。当用户点击下拉列表中的电台时,就会发生这种情况。这现在有效。我的问题是当用户点击下拉列表中的电台时,我已经忘记了电台的名称。我想以某种方式将它传递给 Station 组件。
这是我的 Station 组件:
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