Javascript 如何通过React路由器链接将值从一个功能组件传递到另一个功能组件？

如何使用React Router的

链接

组件将值从我的

ResultItem.js

组件传递到我的

Result.js

组件

ResultItem.js

export default function ResultItem({ result }) {
//desctructure the result elements
const {
    title,
    type,
    id,
    publisher,
    volume,
    issue,
    page_number,
    year_published,
} = result;

return (
    <>
        <div className="card grey lighten-4" style={{ padding: '1rem' }}>
            <span className="badge green white-text">{type}</span>
            <h5>{title}</h5>
            <h6>Publisher: {publisher}</h6>
            <h6>Volume: {volume}</h6>
            <h6>Issue: {issue}</h6>
            <h6>Page Number: {page_number}</h6>
            <h6>Year Published: {year_published}</h6>

            <div>
                <Link
                    to={`/${id}`}
                    className="waves-effect waves-light btn-small blue"
                >
                    Read More
                </Link>
            </div>
        </div>
    </>
);

}

导出默认函数ResultItem（{result}）{
//分解结果元素
常数{
标题
类型，
身份证件
出版商
卷，
问题
页码，
年出版，
}=结果；
返回(
{type}
{title}
发布者：{Publisher}
卷：{Volume}
问题：{Issue}
页码：{页码}
出版年份：{出版年份}
阅读更多
);
}

Result.js

export default function Result({ title }) {
return (
    <>
        <div className="container">
            <h5>
                More information about that thing you just clicked on will be on this
                page.
            </h5>
            <h1>title = {title}</h1>
        </div>
    </>
);

}

导出默认函数结果（{title}）{
返回(
关于你刚才点击的东西的更多信息将出现在这个页面上
页
title={title}
);
}

App.js

<Route path="/:id" component={Result} />

稍后在结果中调用：

{id.id}

---

它有效吗？

不，不幸的是没有，它只是在

Results.js

中为

id

抛出一个未定义的错误。如果添加-const{match}=props，那么

调用：{id.id}是什么意思；设id=match.params；可以通过{id.id}调用id
<Link to={{ 
       pathname: `/item/${item.id}`,
       state: {id: item.id}
}}>