प्रतिक्रिया-राउटर

Question

के साथ एंकर का उपयोग करें मैं प्रतिक्रिया-राउटर का उपयोग कैसे कर सकता हूं, और किसी विशेष पृष्ठ पर किसी विशेष स्थान पर एक लिंक नेविगेट कर सकता हूं? (जैसे /home-page#section-three)

विवरण:

मैं अपने प्रतिक्रिया अनुप्रयोग में react-router उपयोग कर रहा हूँ।

मेरे पास एक साइट-व्यापी नौसेना है जिसे पृष्ठ के किसी विशेष भाग से लिंक करने की आवश्यकता है, जैसे /home-page#section-three।

तो यदि आप /blog पर कह रहे हैं, तो भी इस लिंक पर क्लिक करने से अनुभाग-तीन स्क्रॉल किए गए दृश्य के साथ होम पेज लोड हो जाएगा। यह वास्तव में एक मानक <a href="/home-page#section-three> काम करेगा।

नोट: प्रतिक्रिया-राउटर के रचनाकारों ने स्पष्ट उत्तर नहीं दिया है। वे कहते हैं कि यह प्रगति पर है, और इसी समय अन्य लोगों के उत्तरों का उपयोग करें। मैं इस प्रश्न को & संभावित समाधानों के साथ अद्यतित रखने के लिए अपना सर्वश्रेष्ठ प्रयास करूंगा जब तक एक प्रमुख व्यक्ति उभरता न हो।

रिसर्च:

---

How to use normal anchor links with react-router

यह सवाल 2015 से है (ताकि 10 साल पहले में समय प्रतिक्रिया)। सबसे ऊंचा उत्तर HashLocation के बजाय HistoryLocation का उपयोग करने के लिए कहता है। असल में इसका अर्थ है हैश खंड के बजाय विंडो इतिहास में स्थान संग्रहित करना।

बुरी खबर है ... यहां तक ​​कि इतिहासस्थान का उपयोग करना (2016 में सबसे अधिक ट्यूटोरियल और दस्तावेज़ क्या कहते हैं), एंकर टैग अभी भी काम नहीं करते हैं।

---

https://github.com/ReactTraining/react-router/issues/394

के बारे में ReactTraining पर एक धागा कैसे प्रतिक्रिया रूटर के साथ प्रयोग के लंगर लिंक। यह कोई पुष्टि जवाब नहीं है। सावधान रहें, क्योंकि अधिकांश प्रस्तावित जवाब पुराने हो चुके हैं (जैसे <Link> में "हैश" प्रोप का प्रयोग करके)

---

Answer 1

यहाँ एक समाधान मैंने पाया है (अक्टूबर 2016)। यह क्रॉस-ब्राउज़र संगत है (यानी, एफएफ, क्रोम, मोबाइल सफारी, सफारी में परीक्षण)।

आप अपने राउटर में onUpdate संपत्ति प्रदान कर सकते हैं। इसे किसी भी समय रूट अपडेट कहा जाता है। यह समाधान ऑनअपडेट प्रॉपर्टी का उपयोग यह जांचने के लिए करता है कि क्या कोई DOM तत्व है जो हैश से मेल खाता है, और फिर रूट संक्रमण पूर्ण होने के बाद स्क्रॉल करता है।

आपको ब्राउज़र इतिहास का उपयोग करना होगा और हैश इतिहास नहीं होना चाहिए।

उत्तर thread में "राफ्राक्स" द्वारा उत्तर दिया गया है।

जगह है जहाँ आप <Router> परिभाषित करने के लिए इस कोड जोड़ें:

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 

const routes = (
    // your routes 
); 

function hashLinkScroll() { 
    const { hash } = window.location; 
    if (hash !== '') { 
    // Push onto callback queue so it runs after the DOM is updated, 
    // this is required when navigating from a different page so that 
    // the element is rendered on the page before trying to getElementById. 
    setTimeout(() => { 
     const id = hash.replace('#', ''); 
     const element = document.getElementById(id); 
     if (element) element.scrollIntoView(); 
    }, 0); 
    } 
} 

render(
    <Router 
    history={browserHistory} 
    routes={routes} 
    onUpdate={hashLinkScroll} 
    />, 
    document.getElementById('root') 
) 

आप आलसी महसूस कर रहे हैं और कहा कि कोड को कॉपी नहीं करना चाहते हैं, तो आप Anchorate उपयोग कर सकते हैं जो सिर्फ तुम्हारे लिए है कि समारोह को परिभाषित करता है । https://github.com/adjohnson916/anchorate

Answer 2

बस स्थानीय स्क्रॉल के लिए प्रतिक्रिया रूटर उपयोग करने से बचें:

document.getElementById('myElementSomewhere').scrollIntoView() 

Answer 3

एक वैकल्पिक: प्रतिक्रिया-scrollchor https://www.npmjs.com/package/react-scrollchor

प्रतिक्रिया-scrollchor: स्क्रॉल चिकनी एनिमेशन के साथ लिंक #hash करने के लिए एक घटक प्रतिक्रिया। Scrollchor स्क्रॉल करें और एंकर

नोट का एक मिश्रण है: यह प्रतिक्रिया रूटर

Answer 4

React Router Hash Link मेरे लिए काम किया उपयोग नहीं करता।

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

अपने component.js में लिंक के रूप में आयात: स्थापित करने और लागू करने के लिए आसान

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

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

<Link to="home-page#section-three>Section three</Link> 

नोट: मैंने HashRouterRouter के बजाय

Answer 5

https://stackoverflow.com/a/40280486/515585 के साथ समस्या कभी-कभी आईडी के साथ तत्व को तब भी प्रस्तुत या लोड किया जाता है यदि वह अनुभाग कुछ एसिंक कार्रवाई पर निर्भर करता है। निम्न कार्य आईडी द्वारा तत्व को खोजने और इसे नेविगेट करने का प्रयास करेगा और अधिकतम 100 रीट्री तक पहुंचने तक प्रत्येक 100ms का पुनः प्रयास करें:

scrollToLocation =() => { 
    const { hash } = window.location; 
    if (hash !== '') { 
    let retries = 0; 
    const id = hash.replace('#', ''); 
    const scroll =() => { 
     retries += 0; 
     if (retries > 50) return; 
     const element = document.getElementById(id); 
     if (element) { 
     setTimeout(() => element.scrollIntoView(), 0); 
     } else { 
     setTimeout(scroll, 100); 
     } 
    }; 
    scroll(); 
    } 
}