मेरे पास प्रतिक्रिया-राउटर और संदर्भ हुक का उपयोग करके नीचे का नमूना कोड है जहां मैं यह समझने की कोशिश कर रहा हूं कि जब मैं लिंक घटकों के बजाय एंकर का उपयोग करता हूं तो यह अलग तरह से व्यवहार क्यों करता है। लिंक घटकों पर टिप्पणी की गई है।

यह ऐप केवल एक HTML लिंक के साथ एक स्क्रीन प्रदर्शित करता है जहां आप घटक 2 प्रदर्शित करने के लिए इसे क्लिक कर सकते हैं (घटक 1 प्रारंभ में प्रदर्शित होता है)। मैं एंकर के लिए ऑनक्लिक ईवेंट में संदर्भ मान अपडेट कर रहा हूं (मैं संदर्भ में नाम अपडेट करने के लिए सेटनाम फ़ंक्शन का उपयोग करता हूं)।

जब मैं एंकर टैग का उपयोग करता हूं, तो यह अद्यतन किए गए संदर्भ मान को नहीं रखता है। तो जब यह घटक 2 पर जाता है, तो संदर्भ में नाम मान व्यक्ति 1 के रूप में प्रदर्शित होता है। हालांकि, अगर मैं एंकरों पर टिप्पणी करता हूं और इसके बजाय लिंक घटकों का उपयोग करता हूं, तो संदर्भ मान ठीक से अपडेट किया जाता है।

लिंक घटक अपेक्षानुसार काम क्यों करते हैं लेकिन संदर्भ अपडेट करते समय एंकर नहीं?

import React, { useContext, useState } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { useHistory } from 'react-router-dom';

const NameContext = React.createContext();

function App() {
  const [name, setName] = useState('name1');

  return (
    <NameContext.Provider value={{ name, setName }}>
      <Router>
        <Route exact path="/" component={Component1} />
        <Route exact path="/component1" component={Component1} />
        <Route exact path="/component2" component={Component2} />
      </Router>
    </NameContext.Provider>
  );
}

function Component1() {
  const { name, setName } = useContext(NameContext);
  const history = useHistory();

  return (
    <>
      <div>This is component 1, name = {name}</div>
      <a href="/component2" onClick={() => setName('name2')}>
        Click to display component 2
      </a>
      {/* <Link
        onClick={() => setName('name2')}
        to={(location) => {
          return { ...location, pathname: '/component2' };
        }}
      >
        Click to display component 2
      </Link> */}
    </>
  );
}

function Component2() {
  const { name, setName } = useContext(NameContext);
  const history = useHistory();

  return (
    <>
      <div>This is component 2, name = {name}</div>
      <a href="/component1" onClick={() => setName('name3')}>
        Click to display component 1
      </a>
      {/* <Link
        onClick={() => setName('name3')}
        to={(location) => {
          return { ...location, pathname: '/component1' };
        }}
      >
        Click to display component 1
      </Link> */}
    </>
  );
}

export default App;
1
dcp 22 पद 2020, 05:00

1 उत्तर

सबसे बढ़िया उत्तर

एक एंकर टैग डिफ़ॉल्ट रूप से ब्राउज़र को पुनः लोड करता है। यदि आप इस डिफ़ॉल्ट व्यवहार से बचना चाहते हैं तो आप onClick ईवेंट पर preventDefault विधि को कॉल कर सकते हैं।

react-router एंकर टैग का भी उपयोग नहीं करता है, इसलिए यदि आप एंकर टैग का उपयोग करना चाहते हैं तो आपको इतिहास को मैन्युअल रूप से अपडेट करना होगा।

<div>This is component 1, name = {name}</div>
<a
  href="/component2"
  onClick={(e) => {
    e.preventDefault();
    setName("name2");
    history.push("/component2");
  }}
>
  Click to display component 2
</a>
1
Tholle 22 पद 2020, 05:06