想在带有 typescript 的反应路由器中向 state object 添加属性

Question

I render a wall of cards, when the user clicks on a card i redirect him via react router to the card and render just this specific card. To do so i need to pass the props between the components. I created a component which either renders with a NavLink(wall element) and without (solo Card);

To pass the props i decided to use the react router state object.This works but because TS loves me so much it tells me, that its possibly not a good idea to do so,because the properties in state could be undefined.

So its clear i need to tell TS that those properties exist. I created a interface Match but dont know where to add it.

Its 1 component which eiher a wall or card element.

import {memo} from "react";
import {Picture} from "./../Picture/Picture";
import {NavLink} from "react-router-dom";
import {
  RouteComponentProps,
  StaticRouterProps,
} from "react-router-dom";
import "./card.scss";


interface CompProps
  extends Partial<RouteComponentProps> {
  userId?: string;
  id?: number;
  title?: string;
  body?: string;
  userName?: string;
  clItem: string;
  cardLink: string;
  clTitle: string;
  clBody: string;
  clUser: string;
  linkOptional?: boolean;
}

// interface Match {
//   location: {
//     state: {
//       userId: string;
//       body: string;
//       title: string;
//     };
//   };
// }

export const Card: React.FC<CompProps> = memo(
  ({
    userId,
    id,
    title,
    body,
    clItem,
    cardLink,
    clTitle,
    clBody,
    clUser,
    userName,
    match,
    history,
    linkOptional,
  }): JSX.Element => {
    return (
      <>
        {!linkOptional ? (
          <NavLink
            to={{
              pathname: `/post/${id}/${userName}`,
              state: {
                userId: userId,
                title: title,
                body: body,
              },
            }}
            className={cardLink}>
            <section className={clItem}>
              <p className={clUser}>{userId}</p>
              <Picture
                mediasize="1000"
                clPicture="picture_item"
              />
              <p className={clTitle}>{title}</p>
              <p className={clBody}>{body}</p>
            </section>
          </NavLink>
        ) : (
          <section className={clItem}>
            {console.log(match, history)}
            <p
              className={
                history.location.state.userId
              }></p>
            <Picture
              mediasize="1000"
              clPicture="picture_item"
            />
            <p className={clTitle}>{title}</p>
            <p className={clBody}>{body}</p>
          </section>
        )}
      </>
    );
  }
);

This is the error is see:

/media/darek/Seagate Expansion Drive/WebstormProjects/hsbc/src/components/Card/Card.tsx
TypeScript error in /media/darek/Seagate Expansion Drive/WebstormProjects/hsbc/src/components/Card/Card.tsx(80,17):
Object is possibly 'undefined'.  TS2532

    78 |             <p
    79 |               className={
  > 80 |                 history.location.state.userId
       |                 ^
    81 |               }></p>
    82 |             <Picture
    83 |               mediasize="1000"

Answer 1

i resolved it by using the useLocation hook;

**interface Match {
  userId: string;
  body: string;
  title: string;
}**

interface CompProps {
  clItem: string;
  cardSolo: string;
  clTitle: string;
  clBody: string;
  clUser: string;
}

export const CardNoLink: React.FC<CompProps> = ({
  clItem,
  cardSolo,
  clTitle,
  clBody,
  clUser,
}): JSX.Element => {
  **const {state} = useLocation<Match>();**
  return (
    <section className={`${clItem} ${cardSolo}`}>
      **{console.log(state.userId)}**

This allowed me to add the properties to State.