在 reactJS 中从反应路由器链接传递道具答案

【问题标题】：Pass props from react router Link in reactJS在 reactJS 中从反应路由器链接传递道具
【发布时间】：2020-11-16 20:35:56
【问题描述】：

如何使用 React 路由器链接将 props 传递给另一个组件？

我试着这样做。但是，它不起作用。我的意思是道具没有通过。我想将货币信息传递给另一个组件而不是使用它。有什么建议吗？

return <Div>
        <div className="header">
            <Heading>Welcome To CoinValue </Heading>
        </div>
        <Ul>
            {currentItems.map(currencies => {
                return <Link
                    key={uuidv4()}
                    to={`/cryptoValute/${currencies.id}`
                    props={currencies}}><Li>{currencies.name}</Li></Link>
            })}
            <div>
                {this.renderPagination()}
            </div>
        </Ul>
    </Div>

【问题讨论】：

您能否更好地描述您希望使用此代码完成的任务？您可以简单地将道具传递给另一个组件，而无需使用。
这能回答你的问题吗？ Pass props in Link react-router
@AlbertoPerez 我特别需要通过链接传递道具
@k-wasilewski 我正在尝试这种方式，但仍然无法做到

标签： reactjs

【解决方案1】：

Ciao，试着像这样修改你的代码：

return <Div>
    <div className="header">
        <Heading>Welcome To CoinValue </Heading>
    </div>
    <Ul>
        {currentItems.map(currencies => {
            return <Link
                key={uuidv4()}
                to={{pathname: `/cryptoValute/${currencies.id}`, query: {currencies}}}><Li>{currencies.name}</Li></Link>
                
        })}
        <div>
            {this.renderPagination()}
        </div>
    </Ul>
</Div>

然后在您的组件中，要检索 currencies 值，您可以执行 this.props.location.query.currencies。

【讨论】：

这行出现语法错误to={{pathname: /cryptoValute/${currencies.id}, query: {currencies}}}>`
哦，对不起，我错误地在查询后放了一个`。我更新了我的答案。立即检查。