从 NavLink 获取状态道具

Question

我有一个对象 - 在我的NavLink 定义的某个组件中聊天。点击ChatsElement - 这是一个链接后，我的页面转到/friends/${chat._id} url。在该 url 下是MoblieConversation 组件，我想在其中使用聊天对象，该对象应通过NavLink 以state 的形式传递。我在哪里读到了这个想法 - 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} />

但我不知道如何在链接/friends/${chat_id} 下的组件中找到这个state 道具。我试过这样的东西，但没有用：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

假设MobileConversation 直接由Route 组件渲染并接收route props，那么您可以通过location 属性访问路由状态，即props.location.state.chat。

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

由于这是一个功能组件，并且您已经在使用 react-router-dom 钩子，因此您可以使用 useLocation 钩子。我对打字稿一点也不熟悉，所以希望界面能让你接近你所需要的。

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