मेरे पास एक वस्तु है - कुछ घटक में चैट करें जहां मेरी NavLink परिभाषित है। ChatsElement पर क्लिक करने के बाद - जो एक लिंक है, मेरा पेज /friends/${chat._id} यूआरएल पर जाता है। उस यूआरएल के तहत MoblieConversation घटक है, जहां मैं चैट ऑब्जेक्ट का उपयोग करना चाहता हूं जिसे state के माध्यम से NavLink के रूप में पारित किया जाना चाहिए। वहाँ मैंने इस विचार के बारे में पढ़ा - यहां लिंक विवरण दर्ज करें

<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;
-1
poldeeek 17 अक्टूबर 2020, 01:25

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

चूंकि यह एक कार्यात्मक घटक है और आप पहले से ही प्रतिक्रिया-राउटर-डोम हुक का उपयोग कर रहे हैं, आप का उपयोग कर सकते हैं। उपयोग स्थान हुक। मैं टाइपस्क्रिप्ट से बिल्कुल भी परिचित नहीं हूं, इसलिए उम्मीद है कि इंटरफ़ेस आपको आपकी जरूरत के करीब ले जाएगा।

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 17 अक्टूबर 2020, 02:29