reactjs - リーチルーターからリンクに状態を渡す方法

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に慣れていません

ありがとう