如何将状态从reach路由器传递到Link

Question

更新的代码仍然不起作用

我在这里找不到答案来解决我的问题。

在我的播放列表组件中，我有一个链接到曲目新路径的图像。我想把播放列表ID传递给曲目，这样它就可以根据给定的ID显示曲目，但无论我怎么做，它都不适合我。

我的播放列表组件返回：

<Link to = '/tracks' state = {{playlist:playlist.id}}>
<img alt = "album"src={playlist.images.url}/>
</Link>

在我的轨道组件中，它正在执行以下操作：

export default class Tracks extends React.Component {
constructor() {
super();
this.state = {
playlistid: 0
};
}
componentDidMount() {
this.setState({
playlistid: this.props.location.state.playlistid
});
}
render() {
return (
<div>
<p>PlaylistID: {this.state.playlistid}</p>
</div>
);
}
}

有人能告诉我哪个组件错了吗？对不起，我对React 还很陌生

感谢

Answer 1

为了将状态从Reach路由器传递到Link组件，您可以将状态作为一个单独的道具传递。to道具需要是字符串

<Link
to='/tracks'
state= {{
playlistid: playlist.id
}}
>
<img alt = "album"src={image.url}/>
</Link>

有关更多信息，请参阅Reach路由器的链接文档

编辑：

您实现Link组件的方式与react路由器Link组件一起工作

Answer 2

你可以试试这个：

<Link to={{
pathname: `/tracks/${playlist.id}`, //I assume you tracked the tracklist state here as a props 
}}>
<img alt = "album"src={image.url}/>
</Link>