Mam obiekt - czat w pewnym komponencie, gdzie jest zdefiniowany mój NavLink. Po kliknięciu ChatsElement - który jest linkiem, moja strona przejdź do /friends/${chat._id} URL. W tym adresie URL jest składnik MoblieConversation, gdzie chcę użyć obiektu czatu, który powinien być przekazany jako state przez NavLink. Tam, gdzie przeczytałem o tym pomysłem - Wpisz Opis Link tutaj .

<NavLink
  to={{ pathname: `/friends/${chat._id}`, state: chat }}
  key={chat._id}
>
  <ChatsElement chat={chat} />
</NavLink>

.

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

Ale nie wiem, jak dostać się do tego state prop w komponencie, który jest pod linkiem /friends/${chat_id}. Próbowałem czegoś takiego, ale nie działało: v

import React from "react";
import { useParams, RouteComponentProps } from "react-router";
import styles from "./mobileConversation.module.scss";

interface IParams {
  id: string;
}
type SomeComponentProps = RouteComponentProps;


const MobileConversation: React.FC<SomeComponentProps> = ({ state }) => {
  const { id } = useParams<IParams>();
  const chat = location.state;
  return <div>{id}</div>;
};

export default MobileConversation;
-1
poldeeek 17 październik 2020, 01:25

1 odpowiedź

Najlepsza odpowiedź

Zakładając MobileConversation jest bezpośrednio wykonany przez komponent Route i odbiera Rekwizyty trasy wtedy można uzyskać dostęp do stanu trasy za pomocą location prop, tj. props.location.state.chat.

const MobileConversation: React.FC<SomeComponentProps> = ({
  location,
  state,
}) => {
  const { id } = useParams<IParams>();
  const { chat } = location.state;
  return <div>{id}</div>;
};

Ponieważ jest to komponent funkcjonalny i już używasz haczyków react-router-dom, można użyć UseLocation hak. Nie jestem bardzo zaznajomiony z maszynamiczkami, więc mam nadzieję, że interfejs będziesz blisko tego, czego potrzebujesz.

interface ILocation {
  state: any;
}

const MobileConversation: React.FC<SomeComponentProps> = ({ state }) => {
  const { id } = useParams<IParams>();
  const location = useLocation<ILocation>();
  const { chat } = location.state;
  return <div>{id}</div>;
};
2
Drew Reese 16 październik 2020, 23:29