Как я могу передать значения из функционального компонента через React Router Link в другой функциональный компонент? - PullRequest
Новая
       7

Как я могу передать значения из функционального компонента через React Router Link в другой функциональный компонент?

0 голосов
/ 08 января 2020

Как передать значения из моего ResultItem.js компонента в мой Result.js компонент с использованием компонента Link React Router?

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

}

Приложение. js

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

1 Ответ

0 голосов
/ 08 января 2020 
<Link to={{ 
       pathname: `/item/${item.id}`,
       state: {id: item.id}
}}>

Позже вы звоните: {id.id} в результате

Это работает?

...