javascript - प्रतिक्रिया-राउटर के साथ सामान्य एंकर लिंक का उपयोग कैसे करें




anchor reactjs (2)

इस कोणीय प्रश्न के समान ही: प्रतिक्रिया-राउटर का उपयोग करते समय मैं इन-पेज नेविगेशन के लिए एंकर लिंक का उपयोग कैसे करूं?

दूसरे शब्दों में, प्रतिक्रिया-राउटर का उपयोग करते समय मैं निम्नलिखित सादे HTML को कैसे कार्यान्वित करूं?

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

वर्तमान में मैं ऐसे लिंक पर क्लिक रोकता हूं, और एंकर स्थिति में स्क्रॉल करता हूं। यह संतोषजनक नहीं है, क्योंकि इसका मतलब है कि किसी पृष्ठ के कुछ अनुभाग से सीधे लिंक करना असंभव है।


एंकर लिंक के साथ समस्या यह है कि प्रतिक्रिया-राउटर का डिफ़ॉल्ट राज्य को बनाए रखने के लिए यूआरएल में हैश का उपयोग करना है। सौभाग्य से, आप स्थान दस्तावेज के अनुसार, किसी और चीज़ के लिए डिफ़ॉल्ट व्यवहार को स्वैप कर सकते हैं। आपके मामले में आप शायद इतिहास स्थान वस्तु का उपयोग करके "स्वच्छ URL" आज़मा सकते हैं, जिसका अर्थ है कि प्रतिक्रिया-राउटर यूआरएल हैश का उपयोग नहीं करेगा। इसे इस तरह से आज़माएं:

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

प्रतिक्रिया राउटर हैश लिंक मेरे लिए काम किया। स्थापित करने और कार्यान्वित करने में आसान:

$ npm install --save react-router-hash-link

अपने घटक.जेएस में इसे लिंक के रूप में आयात करें:

import { HashLink as Link } from 'react-router-hash-link';

और एक एंकर <a> का उपयोग करने के बजाय, <Link> उपयोग <Link> :

<Link to="#faq-1>Question 1</Link>
<Link to="#faq-2>Question 2</Link>
<Link to="#faq-3>Question 3</Link>

नोट: मैंने Router बजाय HashRouter उपयोग किया






react-router