如何同时在链接和路由组件中传递道具？

Question

我得到一个始终显示的主要Parent组件，该组件连接到api以获取授权密钥。我只能在他内部的组件之间进行路由，并且我需要将来自Parent组件的授权传递给名为 Playlist 的组件，我会这样：

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

但是我还需要从其他Child组件传递道具（播放列表的链接在哪里），我要这样做：

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

问题在于，在播放列表组件的道具中，我仅获得在 Route 组件内部传递的数据，但我还需要在 Link < / strong>

Answer 1

您可以在URL中包含参数。将您的路径声明为：

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

然后设置您的链接以指向它：

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

然后使用：

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