如何将状态从到达路由器传递给链接答案

【问题标题】：How to pass state to Link from reach-router如何将状态从到达路由器传递给链接
【发布时间】：2020-04-23 17:26:08
【问题描述】：

更新后的代码仍然不起作用

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

在我的播放列表组件中，我有一张图片链接到曲目的新路径。我想将播放列表 ID 传递给曲目，以便它可以根据给定的 ID 显示曲目，但无论如何我都不会这样做。

我的播放列表组件返回：

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

在我的 Track 组件中，它执行以下操作：

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 还是很陌生

谢谢

【问题讨论】：

链接来自某个库吗？ react-router 还是reach-router？
它来自到达路由器。应该来自 react-router 吗？
你的所有路由都使用reach-router吗？
@ShubhamKhatri 我是的
添加了答案

标签： reactjs components reach-router

【解决方案1】：

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

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

更多信息请参考Link from Reach-router

的文档

编辑：

您实现 Link 组件的方式适用于 react-router Link 组件

【讨论】：

对于上面的代码，我收到playlistid: playlist.id 的错误它说它需要一个}
更新了答案，少了一个括号
问题可能是我如何在 Track 组件中处理它，所以我编辑了我的代码
问题是你如何在 playlist.jsx componentDidMount 中设置状态。 setState 是一个函数。工作演示codesandbox.io/s/keen-edison-0pjxb?file=/src/…
哦，压力太大了，我不敢相信这个错误是多么简单。非常感谢你不知道我有多感激我已经盯着这个看了 3 天了。

【解决方案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>

【讨论】：

上述选项在{playlist.id} 之后没有反引号，当我添加一个时，它不会被识别为字符串，并且在此之后的所有内容也都是字符串。
你能说得更透彻一点吗？也许你可以用一些代码来展示它？我想我理解你，但我必须确保给出正确的答案。
问题可能是我如何在 Track 组件中处理它，所以我编辑了我的代码