如何通过 React Router Link 将功能组件中的值传递到另一个功能组件？

Question

如何使用 React Router 的 Link 组件将值从我的 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>
    </>
);

}

结果.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>
    </>
);

}

App.js

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

Answer 1

<Link to={{ 
       pathname: `/item/${item.id}`,
       state: {id: item.id}
}}> 

稍后您在结果中调用：{id.id}

有效吗？