Question

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

但是我不知道如何在链接state下的组件中使用此/friends/${chat_id}道具。我尝试过类似的方法，但是没有用：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>;
};

从NavLink获得状态道具

1 个答案: