从 NavLink 获取状态道具

Question

I have an object - chat in some component where is defined my NavLink . After click on ChatsElement - which is a link, my page go to /friends/${chat._id} url. Under that url is MoblieConversation component, where I want to use chat object which should be passed as state via NavLink . There is where I read about this idea - enter link description here

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

.

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

But I don't know how to get to this state prop in component which is under link /friends/${chat_id} . I tried something like this, but didn't work :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;

Answer 1

Assuming MobileConversation is directly rendered by a Route component and is receiving route props then you can access the route state via the location prop, ie props.location.state.chat .

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

Since this is a functional component and you are already using react-router-dom hooks, you can use the useLocation hook. I'm not very familiar with typescript at all, so hopefully the interface gets you close to what you need.

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>;
};