如何将状态从 reach-router 传递到 Link

Question

更新后的代码仍然无法运行

无法在此处找到有助于解决我的问题的答案。

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

我的播放列表组件returns：

 <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>

有关详细信息，请参阅 Link from Reach-router

的文档

编辑：

您实现 Link 组件的方式与 react-router 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>

如何将状态从 reach-router 传递到 Link

How to pass state to Link from reach-router

components

reactjs

reach-router