प्रतिक्रिया-रूटर स्क्रॉल हर संक्रमण पर शीर्ष पर

Question

मेरे पास एक मुद्दा है जब किसी अन्य पृष्ठ पर नेविगेट करना है, तो इसकी स्थिति पहले पृष्ठ की तरह रहेगी। तो यह स्वचालित रूप से शीर्ष पर स्क्रॉल नहीं करेगा। मैंने window.scrollTo(0, 0)onChange राऊटर पर उपयोग करने की भी कोशिश की है । मैं भी इस मुद्दे को ठीक करने के लिए स्क्रॉलबेहोर का उपयोग किया है, लेकिन यह काम नहीं किया। इस बारे में कोई सुझाव?

Comments

क्या आप componentDidMountनए मार्ग के घटक का तर्क नहीं कर सकते थे ?

— युया

बस उस घटक document.body.scrollTop = 0;को जोड़ें जिसमें componentDidMountआप आगे बढ़ रहे हैं

— जॉन रुडेल

@Kujira मैंने पहले ही स्क्रॉलडाउ को कंपोनेंटडिमाउंट () के अंदर जोड़ दिया है, लेकिन यह काम नहीं किया।

— एड्रियन हार्टेंटो

@JohnRuddell वह भी काम नहीं कर रहा था।

— बजे एड्रियन हार्टेंटो

मैं document.getElementById ( 'जड़') का उपयोग करने के scrollTop = 0 काम करने के लिए।

— श्री 14

Answer 1

React Router v4 के प्रलेखन में स्क्रॉल बहाली के लिए कोड नमूने हैं । यहां उनका पहला कोड सैंपल है, जो किसी पेज को नेविगेट किए जाने पर "स्क्रॉल टू द टॉप" के लिए साइट-वाइड सॉल्यूशन के रूप में कार्य करता है:

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

फिर इसे अपने ऐप के शीर्ष पर रेंडर करें, लेकिन राउटर के नीचे:

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

// or just render it bare anywhere you want, but just one :)
<ScrollToTop/>

^ प्रलेखन से सीधे नकल की

जाहिर है कि यह अधिकांश मामलों के लिए काम करता है, लेकिन वर्जित इंटरफेस से निपटने के तरीके पर अधिक है और एक सामान्य समाधान क्यों लागू नहीं किया गया है।

Comments

आपको कीबोर्ड फोकस को उसी समय रीसेट करना चाहिए जैसे कि टॉप पर स्क्रॉल करना। मैंने इसकी देखभाल करने के लिए एक चीज़ लिखी: github.com/oaf-project/oaf-react-router

— danielnixon

डॉक्स से यह अर्क Because browsers are starting to handle the “default case” and apps have varying scrolling needs (like this website!), we don’t ship with default scroll management. This guide should help you implement whatever scrolling needs you have.मुझे दुखी करता है, क्योंकि वे सभी विकल्प जिनके लिए वे कोड उदाहरण देते हैं, वास्तव में संपत्ति सेटिंग्स के माध्यम से नियंत्रण में बेक किए जा सकते हैं, डिफ़ॉल्ट व्यवहार के आसपास कुछ सम्मेलनों के साथ जिसे तब बदला जा सकता है। यह सुपर हैक और अधूरा, imho लगता है। केवल उन्नत प्रतिक्रिया वाले देवता ठीक से रुटिंग कर सकते हैं और कोई #pitOfSuccess

— स्नोडकोड

oaf- प्रतिक्रिया-राउटर महत्वपूर्ण पहुंच के मुद्दों को संबोधित करता प्रतीत होता है, जिसे work-aroundsयहां सभी ने अनदेखा किया है। +100 @danielnixon के लिए

— स्नोडकोड

स्क्रॉलटॉप को परिभाषित नहीं किया गया है। App.js में इसे कैसे आयात करें? './ScrollToTop' से स्क्रॉल स्क्रॉल आयात नहीं करता है।

— ahtv13

@ ahtv13, आपको एक नया प्रश्न पूछना चाहिए ताकि आप उस कोड को शामिल कर सकें जिसे आप संदर्भित कर रहे हैं।

— एमटीएल

Answer 2

लेकिन कक्षाएं तो 2018 हैं

स्क्रॉल हुक के साथ प्रतिक्रिया हुक

ScrollToTop.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

उपयोग:

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

---

स्क्रॉलटॉप को एक आवरण घटक के रूप में भी लागू किया जा सकता है:

ScrollToTop.js

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

उपयोग:

<Router>
  <ScrollToTop>
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </ScrollToTop>
</Router>

Comments

सबसे अच्छा समाधान मैंने अब तक इंटरनेट पर देखा है। मैं बस थोड़ा उलझन में हूं कि प्रतिक्रिया-राउटर परियोजना में एक संपत्ति क्यों नहीं जोड़ा scrollToTopजाता है <Route>। यह बहुत बार उपयोग की जाने वाली सुविधा लगती है।

— stanleyxu2005

अच्छा काम दोस्त। बहुत मदद की।

— वाइब्स

इकाई परीक्षण के लिए यह एक उपयुक्त तरीका क्या होगा?

— मैट

आपको जांच करनी चाहिए action !== 'POP'। श्रोता कार्रवाई को 2 वें

— अर्ग के

इसके अलावा, आप

— Atombit के

Answer 3

यह उत्तर विरासत कोड के लिए है, राउटर v4 + अन्य उत्तरों की जांच के लिए

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router>

यदि यह काम नहीं कर रहा है, तो आपको इसका कारण ढूंढना चाहिए। अंदर भीcomponentDidMount

document.body.scrollTop = 0;
// or
window.scrollTo(0,0);

आप उपयोग कर सकते हैं:

componentDidUpdate() {
  window.scrollTo(0,0);
}

आप "स्क्रॉल = गलत" और फिर अपडेट में कुछ ध्वज जोड़ सकते हैं:

componentDidUpdate() {
  if(this.scrolled === false){
    window.scrollTo(0,0);
    scrolled = true;
  }
}

Comments

मैंने उत्तर w / o getDomNode को बिल्कुल अद्यतन कर दिया है क्योंकि वास्तव में मुझे इसे स्क्रॉल करने के लिए कभी भी शीर्ष पर नहीं लाना पड़ा। मैंने अभी उपयोग किया हैwindow.scrollTo(0,0);

— लुकास लाइज़िस

onUpdateहुक को रेकटर-राउटर v4 में अपदस्थ किया जाता है - बस यह इंगित किया जाता है कि बाहर

— ड्रैगोस रेकस्कु

@DragosRizescu onUpdateहुक के बिना इस पद्धति का उपयोग करने पर कोई मार्गदर्शन ?

— मैट वोडा

@MattVoda आप खुद इतिहास में बदलाव के लिए सुन सकते हैं, उदाहरण देख सकते हैं: github.com/ReactTraining/history

— Lukas Liesis

@MattVoda आप कैसे प्राप्त कर सकते हैं पर नीचे एक जवाब लिखा है कि प्रतिक्रिया रूटर-v4 वाले

— Dragos Rizescu

Answer 4

के लिए प्रतिक्रिया रूटर v4 :, यहाँ एक बनाने प्रतिक्रिया एप्लिकेशन के अंतर्गत है कि पुस्तक बहाली को प्राप्त होता है http://router-scroll-top.surge.sh/ ।

इसे प्राप्त करने के लिए आप Routeघटक बना सकते हैं और जीवन चक्र विधियों का लाभ उठा सकते हैं :

import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';

class ScrollToTopRoute extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.path === this.props.location.pathname && this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    const { component: Component, ...rest } = this.props;

    return <Route {...rest} render={props => (<Component {...props} />)} />;
  }
}

export default withRouter(ScrollToTopRoute);

पर componentDidUpdateहम जांच कर सकते हैं जब स्थान पथ नाम परिवर्तन और से इसका मिलान pathअगर उन संतुष्ट प्रोप और,, खिड़की स्क्रॉल बहाल।

इस दृष्टिकोण के बारे में क्या अच्छा है, यह है कि हमारे पास स्क्रॉल को पुनर्स्थापित करने वाले मार्ग हो सकते हैं और वे रूट जो स्क्रॉल को पुनर्स्थापित नहीं करते हैं।

यहाँ एक App.jsउदाहरण दिया गया है कि आप उपरोक्त का उपयोग कैसे कर सकते हैं:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Lorem from 'react-lorem-component';
import ScrollToTopRoute from './ScrollToTopRoute';
import './App.css';

const Home = () => (
  <div className="App-page">
    <h2>Home</h2>
    <Lorem count={12} seed={12} />
  </div>
);

const About = () => (
  <div className="App-page">
    <h2>About</h2>
    <Lorem count={30} seed={4} />
  </div>
);

const AnotherPage = () => (
  <div className="App-page">
    <h2>This is just Another Page</h2>
    <Lorem count={12} seed={45} />
  </div>
);

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="App-header">
            <ul className="App-nav">
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/another-page">Another Page</Link></li>
            </ul>
          </div>
          <Route exact path="/" component={Home} />
          <ScrollToTopRoute path="/about" component={About} />
          <ScrollToTopRoute path="/another-page" component={AnotherPage} />
        </div>
      </Router>
    );
  }
}

export default App;

ऊपर दिए गए कोड से, जो इंगित करना दिलचस्प है, वह यह है कि केवल नेविगेट करने /aboutया /another-pageशीर्ष कार्रवाई करने के लिए स्क्रॉल करने से पहले ही विकृत हो जाएगा। हालाँकि जब /कोई स्क्रॉल रिस्टोर नहीं होगा तब होगा।

पूरा कोडबेस यहां पाया जा सकता है: https://github.com/rizedr/react-router-scroll-top

Comments

मुझे इसकी ही खोज थी! मुझे ScrollToTopRoute के ComponentsDidMount में ScrollTo को जोड़ना था, क्योंकि मेरे पास मेरे घटक एक स्विच घटक में लिपटे हुए हैं (यदि मैंने प्रत्येक माउंट पर आग लगाना चाहा तो मुझे भी हटा दिया गया)

— tocallalhan

अपने ScrollToTopRoute के रेंडर में, आपको रेंडर = {प्रॉप्स => (<कंपोनेंट {... प्रॉप्स} />)} को निर्दिष्ट करने की आवश्यकता नहीं है। बस मार्ग में {... बाकी} का उपयोग करके काम करेगा।

— फिनिकफ्लेम

इस उत्तर ने मुझे एक समाधान प्राप्त करने और मेरी बग को ठीक करने के लिए सभी उपकरण प्रदान किए। बहुत बहुत धन्यवाद।

— नल

यह पूरी तरह से काम नहीं कर रहा है। यदि आप प्रोजेक्ट लिंक का अनुसरण करते हैं तो यह डिफ़ॉल्ट रूप से खुला होगा Home। अब नीचे की ओर स्क्रॉल करें Homeऔर अब 'OtherPage' पर जाएं और स्क्रॉल न करें। अब यदि आप फिर से आते हैं Home, तो यह पृष्ठ शीर्ष पर स्क्रॉल किया जाएगा। लेकिन आपके उत्तर के अनुसार, homeपृष्ठ को स्क्रॉल रखा जाना चाहिए।

— आदित्य ad१० May०

Answer 5

यह उल्लेखनीय है कि onUpdate={() => window.scrollTo(0, 0)}विधि पुरानी है।

यहां प्रतिक्रिया-राउटर 4+ के लिए एक सरल समाधान है।

const history = createBrowserHistory()

history.listen(_ => {
    window.scrollTo(0, 0)  
})

<Router history={history}>

Comments

अगर इतिहास का उपयोग किया जाए तो यह सही उत्तर होना चाहिए। यह आपके द्वारा वर्तमान में जारी किए गए पृष्ठ के लिंक पर क्लिक करने सहित सभी घटनाओं को कवर करता है। केवल एक समस्या मुझे मिली है कि स्क्रोल्टो में आग नहीं लगी थी और इसे सेटटाइमआउट में लपेटने की आवश्यकता थी (window.scrollTo (0, 0), 0); मुझे अभी भी समझ में नहीं आया कि क्यों, लेकिन हो सकता है

— फुटपाथ

जब आप जोड़ते हैं #और ?हमारे url के अंत में आपको एक समस्या होगी । पहले मामले में आपको शीर्ष पर कोई स्क्रॉल नहीं करना चाहिए दूसरे मामले में आपको बिल्कुल भी स्क्रॉल नहीं करना चाहिए

— आर्सेनी- II

दुर्भाग्य से, यह BrowserRouter के साथ काम नहीं करता है।

— वाइबस

Answer 6

यदि आप रिएक्ट 16.8+ चला रहे हैं तो यह एक ऐसे घटक को संभालने के लिए सीधा है जो विंडो को हर नेविगेशन पर स्क्रॉल करेगा:
यहां स्क्रॉलटॉट.जेएस घटक में है

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

फिर इसे अपने ऐप के शीर्ष पर रेंडर करें, लेकिन राउटर
हियर के नीचे app.js में है

import ScrollToTop from "./scrollToTop";

function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

या index.js में

import ScrollToTop from "./scrollToTop";

ReactDOM.render(
    <BrowserRouter>
        <ScrollToTop />
        <App />
    </BrowserRouter>
    document.getElementById("root")
);

Answer 7

मेरे आवेदन के साथ भी यही समस्या थी। नीचे दिए गए कोड स्निपेट का उपयोग करने से मुझे अगले बटन के क्लिक पर पृष्ठ के शीर्ष पर स्क्रॉल करने में मदद मिली।

<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>
...
</Router>

हालाँकि, समस्या अभी भी ब्राउज़र पर वापस बनी हुई है। बहुत सारे परीक्षणों के बाद, एहसास हुआ कि यह ब्राउज़र विंडो के इतिहास ऑब्जेक्ट के कारण था, जिसमें एक संपत्ति स्क्रॉल है, जो ऑटो पर सेट किया गया था। इसे मैनुअल करने के लिए सेट करने से मेरी समस्या हल हो गई।

function scrollToTop() {
    window.scrollTo(0, 0)
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }
}

<Router onUpdate= {scrollToTop} history={browserHistory}>
....
</Router>

Answer 8

नीचे एक घटक में <Router>

बस एक प्रतिक्रिया हुक जोड़ें (यदि आप एक प्रतिक्रिया वर्ग का उपयोग नहीं कर रहे हैं)

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [props.location]);

Answer 9

मैं उन लोगों के लिए अपना समाधान साझा करना चाहता हूं जो react-router-dom v5इन v4 समाधानों में से किसी का भी उपयोग नहीं कर रहे हैं मेरे लिए काम किया।

मेरी समस्या को हल करने के लिए प्रतिक्रिया-राउटर-स्क्रॉल-टॉप स्थापित किया गया था और आवरण को इस <App />तरह से रखा गया था:

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

और बस! इसने काम कर दिया!

Answer 10

हुक रचना योग्य हैं, और प्रतिक्रिया रूटर v5.1 के बाद से हमारे पास एक useHistory()हुक है। तो @ zurfyx के उत्तर के आधार पर मैंने इस कार्यक्षमता के लिए एक पुनः प्रयोग करने योग्य हुक बनाया है:

// useScrollTop.ts
import { useHistory } from 'react-router-dom';
import { useEffect } from 'react';

/*
 * Registers a history listener on mount which
 * scrolls to the top of the page on route change
 */
export const useScrollTop = () => {
    const history = useHistory();
    useEffect(() => {
        const unlisten = history.listen(() => {
            window.scrollTo(0, 0);
        });
        return unlisten;
    }, [history]);
};

Answer 11

एक प्रतिक्रिया हुक आप अपने रूट घटक में जोड़ सकते हैं। useLayoutEffectकस्टम श्रोताओं के बजाय का उपयोग करना ।

import React, { useLayoutEffect } from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';

export default function Routes() {
  const location = useLocation();
  // Scroll to top if path changes
  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
      <Switch>
        <Route exact path="/">

        </Route>
      </Switch>
  );
}

अपडेट : कम विज़ुअल जंक के लिए, useLayoutEffectइसके बजाय उपयोग करने के लिए अपडेट किया गया useEffect। मोटे तौर पर यह अनुवाद करता है:

• useEffect: घटकों को प्रस्तुत करना -> स्क्रीन के लिए पेंट -> शीर्ष पर स्क्रॉल करें (प्रभाव चलाएँ)
• useLayoutEffect: घटकों को प्रस्तुत करना -> शीर्ष (रन प्रभाव) पर स्क्रॉल करें -> स्क्रीन पर पेंट करें

इस आधार पर कि आप डेटा लोड कर रहे हैं (स्पिनरों के बारे में सोचें) या यदि आपके पास पृष्ठ संक्रमण एनिमेशन हैं, तो आपके useEffectलिए बेहतर काम कर सकता है।

Answer 12

मेरा समाधान: एक घटक जो मैं अपने स्क्रीन घटकों में उपयोग कर रहा हूं (जहां मैं शीर्ष पर स्क्रॉल करना चाहता हूं)।

import { useLayoutEffect } from 'react';

const ScrollToTop = () => {
    useLayoutEffect(() => {
        window.scrollTo(0, 0);
    }, []);

    return null;
};

export default ScrollToTop;

यह वापस जाते समय स्क्रॉल स्थिति को संरक्षित करता है। UseEffect () का उपयोग करना मेरे लिए छोटी बात थी, जब डॉक्यूमेंट वापस ऊपर की ओर जाएगा और पहले से ही स्क्रॉल किए गए डॉक्यूमेंट में रूट बदलने पर ब्लिंक इफेक्ट होगा।

Answer 13

रिएक्ट हुक 2020 :)

import React, { useLayoutEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation();
  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

Comments

क्या आप कृपया इस भाग की व्याख्या कर सकते हैं? const ScrollToTop: React.FC = () => {मुझे समझ में नहीं आ रहा है कि क्या ScrollToTop: React.FCहै

— beeftosino

टाइपस्क्रिप्ट परिभाषा

— केप्रो

Answer 14

मैंने हायर-ऑर्डर कंपोनेंट लिखा withScrollToTop। यह HOC दो झंडों में लगती है:

• onComponentWillMount- क्या नेविगेशन पर शीर्ष पर स्क्रॉल करना है ( componentWillMount)
• onComponentDidUpdate- अपडेट पर शीर्ष पर स्क्रॉल करना है या नहीं ( componentDidUpdate)। जहां घटक को अनमाउंट नहीं है, लेकिन एक नेविगेशन घटना होती है, उदाहरण के लिए, से यह झंडा मामलों में आवश्यक है /users/1करने के लिए /users/2।

---

// @flow
import type { Location } from 'react-router-dom';
import type { ComponentType } from 'react';

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

type Props = {
  location: Location,
};

type Options = {
  onComponentWillMount?: boolean,
  onComponentDidUpdate?: boolean,
};

const defaultOptions: Options = {
  onComponentWillMount: true,
  onComponentDidUpdate: true,
};

function scrollToTop() {
  window.scrollTo(0, 0);
}

const withScrollToTop = (WrappedComponent: ComponentType, options: Options = defaultOptions) => {
  return class withScrollToTopComponent extends Component<Props> {
    props: Props;

    componentWillMount() {
      if (options.onComponentWillMount) {
        scrollToTop();
      }
    }

    componentDidUpdate(prevProps: Props) {
      if (options.onComponentDidUpdate &&
        this.props.location.pathname !== prevProps.location.pathname) {
        scrollToTop();
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default (WrappedComponent: ComponentType, options?: Options) => {
  return withRouter(withScrollToTop(WrappedComponent, options));
};

इसके प्रयेाग के लिए:

import withScrollToTop from './withScrollToTop';

function MyComponent() { ... }

export default withScrollToTop(MyComponent);

Answer 15

यहाँ एक और तरीका है।

के लिए प्रतिक्रिया रूटर v4 आप भी बाँध इतिहास स्थिति में परिवर्तन करने के लिए एक श्रोता कर सकते हैं, निम्नलिखित तरीके से:

let firstMount = true;
const App = (props) => {
    if (typeof window != 'undefined') { //incase you have server-side rendering too             
        firstMount && props.history.listen((location, action) => {
            setImmediate(() => window.scrollTo(0, 0)); // ive explained why i used setImmediate below
        });
        firstMount = false;
    }

    return (
        <div>
            <MyHeader/>            
            <Switch>                            
                <Route path='/' exact={true} component={IndexPage} />
                <Route path='/other' component={OtherPage} />
                // ...
             </Switch>                        
            <MyFooter/>
        </div>
    );
}

//mounting app:
render((<BrowserRouter><Route component={App} /></BrowserRouter>), document.getElementById('root'));

स्क्रॉल स्तर 0 के बिना setImmediate()भी सेट किया जाएगा , भले ही लिंक पर क्लिक करके मार्ग बदल दिया गया हो, लेकिन यदि उपयोगकर्ता ब्राउज़र पर बैक बटन दबाता है, तो यह ब्राउज़र के रूप में काम नहीं करेगा, क्योंकि पिछला बटन मैन्युअल रूप से स्क्रॉल स्तर को मैन्युअल रूप से पिछले स्तर पर रीसेट करेगा। , इसलिए setImmediate()ब्राउज़र के समाप्त होने के बाद हम अपने फंक्शन का उपयोग करते हैं, इसलिए स्क्रॉल स्तर को रीसेट करने के बाद हमें वांछित प्रभाव मिलता है।

Answer 16

React रूटर डोम v4 के साथ आप उपयोग कर सकते हैं

नीचे की तरह एक स्क्रॉलपटॉप कॉमपॉइंटेंट घटक बनाएं

class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
      if (this.props.location !== prevProps.location) {
        window.scrollTo(0, 0)
      }
    }

    render() {
      return this.props.children
    }
}

export default withRouter(ScrollToTop)

या यदि आप टैब का उपयोग कर रहे हैं, तो नीचे दिए गए जैसे कुछ का उपयोग करें

class ScrollToTopOnMount extends Component {
    componentDidMount() {
      window.scrollTo(0, 0)
    }

    render() {
      return null
    }
}

class LongContent extends Component {
    render() {
      <div>
         <ScrollToTopOnMount/>
         <h1>Here is my long content page</h1>
      </div>
    }
}

// somewhere else
<Route path="/long-content" component={LongContent}/>

आशा है कि यह स्क्रॉल बहाली के लिए और अधिक मदद करता है। डॉक्स हैर प्रतिक्रिया रूटर डोम स्क्रॉल बहाली पर प्रतिक्रिया करता है

Answer 17

मैंने पाया कि ReactDOM.findDomNode(this).scrollIntoView()काम कर रहा है। मैंने उसे अंदर रखा componentDidMount()।

Comments

यह अनिर्दिष्ट आंतरिक सामान है जो w / o नोटिंग को बदल सकता है और आप कोड काम करना बंद कर देंगे।

— लुकास लाइज़िस

Answer 18

छोटे ऐप्स के लिए, 1-4 मार्गों के साथ, आप इसे केवल एक मार्ग के बजाय #id के साथ शीर्ष DOM तत्व पर पुनर्निर्देशित करके हैक करने का प्रयास कर सकते हैं। फिर स्क्रॉलटॉप में रूट्स को लपेटने या जीवनचक्र विधियों का उपयोग करने की आवश्यकता नहीं है।

Answer 19

अपने में router.js, इस फ़ंक्शन को routerऑब्जेक्ट में जोड़ें । यह काम करेगा।

scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    },

ऐशे ही,

**Routes.js**

import vue from 'blah!'
import Router from 'blah!'

let router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    },
    routes: [
            { url: "Solar System" },
            { url: "Milky Way" },
            { url: "Galaxy" },
    ]
});

Answer 20

render() {
    window.scrollTo(0, 0)
    ...
}

यदि प्रॉप्स बदले नहीं गए हैं और कंपोनेंटडीड्यूपडेट () फायरिंग नहीं होने की स्थिति में एक सरल समाधान हो सकता है।

Answer 21

यह हैकी (लेकिन काम करता है): मैं अभी जोड़ता हूं

window.scrollTo (0,0);

सौंपने के लिए();

Comments

इसलिए यह हर बार राज्य परिवर्तनों को स्क्रॉल करेगा और पुन: प्रस्तुत करना होगा, तब नहीं जब नेविगेशन में परिवर्तन हो। बस मेरे जवाब की जाँच करें

— लुकस लाइज़िस