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

Question

How can I pass values from my ResultItem.js component, to my Result.js component using React Router's Link component?

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>
    </>
);

}

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>
    </>
);

}

App.js

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

Answer 1

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

Later you call: {id.id} in Result

Does it works?