score:1

Accepted answer

the react-router-dom link component api changed a bit from v5 to v6.

link

state is now a "top-level" prop.

interface linkprops
  extends omit<
    react.anchorhtmlattributes<htmlanchorelement>,
    "href"
  > {
  replace?: boolean;
  state?: state;
  to: to;
}

in the home component you can just move the state from the to object up to be a prop on the link.

<list>
  {covidsdata.map((coviddata) => {
    return (
      <div key={coviddata.id}>
        <listitem>
          <listitemtext primary={coviddata.country} />
          <link
            classname="link-details"
            to={`/view-details/${coviddata.id}`}
            state={{ covidsdata: coviddata }} // <-- state is a prop
          >
            <button
              style={{ marginleft: "0.5em", height: "1.8em" }}
              variant="contained"
            >
              view
            </button>
          </link>
        </listitem>
        <divider />
      </div>
    );
  })}
</list>

edit react-routing-not-working-upgrading-from-v5-to-v6


Related Query

More Query from same tag