I need to pass a props in a Link and read it in the passed component

Question

As already mentioned above, I need to pass a props in a Link and read it in the passed component.

In particular I have a Card component where props are passed; of these props I need to pass "props.geo" in the City component.

I tried to do it as shown in the code but noticed that nothing is printed.

Card.js

import {Link } from "react-router-dom";

export default function Card(props) {

    return (
        <div className="card mt-3 me-3" style={{ width: "18rem" }}>
            <div className="card-body">
                <h5 className="card-title">{props.name}</h5>
                <h6 className="card-subtitle mb-2 text-muted">{props.username}</h6>
                <p className="card-text">{props.email} <Link to={`mailto:${props.email}`}><button>Contact me</button></Link> </p>
                <a className="card-link"><Link to="/city" state={{ geo: props.geo }}  target="_blank">View city</Link></a>
            </div>
        </div>
    )
}

City.js

import { useLocation } from 'react-router-dom'

export default function City(props) {
    const location = useLocation()
    console.log(props, " props");
    console.log(location, " useLocation Hook");
    return (
        <h1>You are in City Component</h1>
    )
}

Where is the problem?

You can access state from the object returned by `useLocation()`. Also you don't need to wrap a `Link` with an `a` tag, as it already renders as that tag. — DallogFheir, Aug 22 '23 at 10:00
In your snippet, you should be able to do `location.state.geo`. Does it not work? — DallogFheir, Aug 22 '23 at 10:03
no, i get error: Cannot read properties of null (reading 'geo') — Sarah, Aug 22 '23 at 10:04
`` tag breaks `` tags, you can't use both. Also, state is cleared on refresh, you should encode the data in the url — Konrad, Aug 22 '23 at 10:17
See this doc https://reactrouter.com/en/main/components/link#state for more info — Lokkesh, Aug 22 '23 at 10:22
Ah, the problem is that you're opening the link in a new tab, which doesn't have access to history state. You could use URL query params instead. — DallogFheir, Aug 22 '23 at 10:27

I need to pass a props in a Link and read it in the passed component

0 Answers0