Как передать состояние на Link от reach-router - PullRequest
Новая
       70

Как передать состояние на Link от reach-router

1 голос
/ 23 апреля 2020

ОБНОВЛЕННЫЙ КОД ВСЕ ЕЩЕ НЕ РАБОТАЕТ

Не удалось найти ответ здесь, чтобы помочь с моей проблемой.

В моем компоненте Playlist у меня есть изображение, которое ссылается на новый путь для треков. Я хочу передать идентификатор списка воспроизведения треку, чтобы он мог отображать треки на основе заданного идентификатора, но независимо от того, как я это делаю, он не будет работать для меня.

Мой компонент списка воспроизведения возвращает: 

 <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

Спасибо

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Для того, чтобы вы могли передать состояние компоненту Link от маршрутизатора Reach, вы можете передать состояние в виде отдельной поддержки. to должен быть строкой 

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

Для получения дополнительной информации см. Документацию Ссылка от Reach-router

РЕДАКТИРОВАТЬ:

То, как вы реализовали компонент Link, работает с реагирующим маршрутизатором Link компонент

0 голосов
/ 23 апреля 2020

Вы можете попробовать это: 

<Link to={{
              pathname: `/tracks/${playlist.id}, //I assume you tracked the tracklist state here as a props 

              }}>
             <img alt = "album"src={image.url}/>
       </Link>
...