從 NavLink 獲取狀態道具

Question

我在定義了我的NavLink某個組件中有一個對象聊天。 點擊ChatsElement - 這是一個鏈接后，我的頁面轉到/friends/${chat._id}網址。 在該 url 下是MoblieConversation組件，我想在其中使用聊天對象，該對象應該通過NavLink作為state NavLink 。 我在那里讀到了這個想法 -在此處輸入鏈接描述

<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組件直接呈現並且正在接收路由道具，那么您可以通過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>;
};