Как передать реквизиты в компонент Link и Route одновременно?

Question

Я получаю один основной родительский компонент, который отображается постоянно, и этот компонент подключается к API для получения ключа авторизации. Я маршрутизирую только между компонентами, которые находятся внутри него, и мне нужно передать авторизацию от Parent Como к компоненту под названием Playlist , что я делаю так:

<Route path="/playlists" component={() => <Playlists authKey={auth} />} />

Но мне также нужно передать реквизиты из другого дочернего компонента (где ссылка на плейлисты), что я делаю так:

<Link to={{ pathname: '/playlists', myProps: { name: 'some name' }}}

Проблема в том, что в реквизитах Плейлист компонента я получаю только данные, которые я передаю внутри Route compo, но мне также нужны данные из реквизита, переданного внутрь Link

Answer 1

Вы можете включить параметр в URL. Объявите ваш путь как:

<Route path="/playlists/:name" component={() => <Playlists authKey={auth} />} />

Затем установите ссылку, ведущую к нему:

<Link to={{ pathname: '/playlists/some_name'}} />

И затем получите доступ к ней, используя:

const name = this.props.match.params.name