প্রতিক্রিয়া-রাউটার প্রতিটি ট্রানজিশনে শীর্ষে স্ক্রোল

Question 1

অন্য পৃষ্ঠায় নেভিগেট করার সময় আমার একটি সমস্যা আছে, এর অবস্থানটি পৃষ্ঠার মতোই থাকবে। সুতরাং এটি স্বয়ংক্রিয়ভাবে শীর্ষে স্ক্রোল করবে না। আমিও ব্যবহার করার চেষ্টা করেছি window.scrollTo(0, 0)উপর onChangeরাউটার। আমি scrollBehaviorএই সমস্যাটি সমাধান করার জন্যও ব্যবহার করেছি তবে এটি কার্যকর হয়নি। এ সম্পর্কে কোন পরামর্শ?

Question 2

প্রতিক্রিয়া রাউটার ভি 4 এর ডকুমেন্টেশনে স্ক্রোল পুনরুদ্ধারের কোড কোড রয়েছে contains এখানে তাদের প্রথম কোডের নমুনা রয়েছে, যা কোনও পৃষ্ঠায় নেভিগেট করা হলে "শীর্ষে স্ক্রোল করুন" এর জন্য সাইট-প্রশস্ত সমাধান হিসাবে কাজ করে:

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/>

the ডকুমেন্টেশন থেকে সরাসরি অনুলিপি করা

স্পষ্টতই এটি বেশিরভাগ ক্ষেত্রে কাজ করে তবে ট্যাবযুক্ত ইন্টারফেসগুলি কীভাবে মোকাবেলা করতে হবে এবং জেনেরিক সমাধান কেন প্রয়োগ করা হয়নি সে সম্পর্কে আরও অনেক কিছু রয়েছে।

Question 3

তবে ক্লাসগুলি তাই 2018

প্রতিক্রিয়া হুক সহ স্ক্রোলটপ টপ বাস্তবায়ন

স্ক্রোলটোপ.জেএস

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>

স্ক্রোলটোপও একটি মোড়কের উপাদান হিসাবে প্রয়োগ করা যেতে পারে:

স্ক্রোলটোপ.জেএস

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>

Question 4

এই উত্তরটি লেগ্যাসি কোডের জন্য, রাউটার ভি 4 + অন্যান্য উত্তর পরীক্ষা করে দেখুন

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

Question 5

রিঅ্যাক্ট-রাউটার ভি 4-র জন্য , এখানে একটি ক্রিয়েট -রিএ্যাক্ট-অ্যাপ্লিকেশন রয়েছে যা স্ক্রোলটি পুনরুদ্ধার করে: http://router-scrol-top.surb.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-scrol-top

Question 6

এটি লক্ষণীয় যে onUpdate={() => window.scrollTo(0, 0)}পদ্ধতিটি পুরানো।

প্রতিক্রিয়া-রাউটার 4+ এর জন্য এখানে একটি সহজ সমাধান।

const history = createBrowserHistory()

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

<Router history={history}>

Question 7

আপনি যদি 16.8+ প্রতিক্রিয়াটি চালাচ্ছেন তবে প্রতিটি ন্যাভিগেশনে উইন্ডোটি উপরে স্ক্রোল করবে এমন একটি উপাদান সহ এটি হ্যান্ডেল করা সোজা
for এখানে স্ক্রোলটপ টপ.জেএস উপাদান রয়েছে

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")
);

Question 8

একটি প্রতিক্রিয়া হুক আপনি নিজের রুট উপাদানকে যুক্ত করতে পারেন। 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আপনার পক্ষে আরও ভাল কাজ করতে পারে।

Question 9

আমার অ্যাপ্লিকেশনটিতে আমার একই সমস্যা ছিল the নীচের কোড স্নিপেট ব্যবহার করে পরবর্তী বোতামটির ক্লিক করে পৃষ্ঠার শীর্ষে স্ক্রোল করতে সহায়তা করলাম।

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

যাইহোক, সমস্যাটি এখনও ব্রাউজারে পিছনে রয়েছে। অনেকগুলি পরীক্ষার পরে, বুঝতে পেরেছিলেন যে এটি ব্রাউজার উইন্ডোটির ইতিহাসের অবজেক্টের কারণে, যার একটি সম্পত্তি স্ক্রোলরেস্টোর রয়েছে যা স্বয়ংক্রিয়ভাবে সেট করা হয়েছিল manual এটি ম্যানুয়ালটিতে সেট করা আমার সমস্যার সমাধান করেছে।

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

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

Question 10

নীচে একটি উপাদান <Router>

কেবল একটি প্রতিক্রিয়া হুক যুক্ত করুন (আপনি যদি কোনও প্রতিক্রিয়া শ্রেণি ব্যবহার করছেন না)

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

Question 11

যারা আমার ব্যবহার react-router-dom v5করছেন তারা আমার জন্য এই সমাধানটি ভাগ করতে চান কারণ এই ভি 4 সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করে নি।

আমার সমস্যার সমাধানটি কীটি ছিল রিএ্যাক্ট-রাউটার-স্ক্রোল-শীর্ষটি ইনস্টল করে এবং মোড়কটি <App />এভাবে লাগিয়েছিল :

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

এবং এটাই! এটা কাজ করেছে!

Question 12

হুকগুলি সামঞ্জস্যযোগ্য এবং প্রতিক্রিয়া রাউটার ভি 5.1 থেকে আমাদের একটি useHistory()হুক রয়েছে। সুতরাং @ জুরফেক্সের উত্তরের ভিত্তিতে আমি এই কার্যকারিতাটির জন্য পুনরায় ব্যবহারযোগ্য হুক তৈরি করেছি:

// 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]);
};

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

Question 14

আমার সমাধান: এমন একটি উপাদান যা আমি আমার পর্দার উপাদানগুলিতে ব্যবহার করছি (যেখানে আমি শীর্ষে একটি স্ক্রোল চাই)।

import { useLayoutEffect } from 'react';

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

    return null;
};

export default ScrollToTop;

এই ফিরে যাওয়ার সময় স্ক্রোল অবস্থান সংরক্ষণ করে। UseEffect () ব্যবহার করা আমার পক্ষে বগি ছিল, যখন নথির পিছনে যাওয়ার সময় শীর্ষে স্ক্রোল হত এবং যখন ইতিমধ্যে স্ক্রলযুক্ত নথিতে রুট পরিবর্তন করা হয়েছিল তখন একটি ঝলকানো প্রভাবও ছিল।

Question 15

আমি একটি উচ্চ-আদেশের উপাদানটি লিখেছিলাম withScrollToTop। এই এইচওসি দুটি পতাকা গ্রহণ করে:

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

Question 16

এখানে অন্য পদ্ধতি।

জন্য প্রতিক্রিয়া-রাউটার 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'));

setImmediate()কোনও লিঙ্কে ক্লিক করে যদি রুটটি পরিবর্তন করা হয় তবে স্ক্রল স্তরটি 0 এ সেট করা হবে তবে যদি ব্যবহারকারী ব্রাউজারে ব্যাক বোতাম টিপেন তবে এটি পিছনে বোতাম টিপে গেলে ব্রাউজারটি স্ক্রল স্তরটিকে ম্যানুয়ালি পূর্ববর্তী স্তরে পুনরায় সেট করার মত কাজ করবে না তাই setImmediate()ব্রাউজারটি স্ক্রোল স্তরটি পুনরায় সেট করার পরে আমাদের কাঙ্ক্ষিত প্রভাব প্রদানের পরে আমাদের ফাংশনটি কার্যকর করা হয় cause

Question 17

প্রতিক্রিয়া রাউটার ডোম ভি 4 দিয়ে আপনি ব্যবহার করতে পারেন

নীচের মত একটি স্ক্রলটো টপ কম্পোনেন্ট উপাদান তৈরি করুন

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

আশা করি এটি স্ক্রোল পুনরুদ্ধারের জন্য আরও সাহায্য করবে যেখানে ডক্স হরে রিএ্যাক্ট রাউটার ডোম স্ক্রোল পুনরুদ্ধার

Question 18

আমি খুঁজে পেয়েছি যে ReactDOM.findDomNode(this).scrollIntoView()কাজ করছে। আমি এটি ভিতরে রাখলাম componentDidMount()।

Question 19

1-4 টি রুট সহ ছোট অ্যাপ্লিকেশনগুলির জন্য, আপনি কেবলমাত্র একটি রুটের পরিবর্তে # আইডি দিয়ে শীর্ষ ডিওএম উপাদানটিতে পুনর্নির্দেশ দিয়ে হ্যাক করার চেষ্টা করতে পারেন। তারপরে স্ক্রোলটোপতে বা জীবনচক্র পদ্ধতি ব্যবহার করে রুটগুলি মোড়ানোর দরকার নেই।

Question 20

আপনার 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" },
    ]
});

Question 21

পূর্বের পোস্টগুলিতে প্রত্যেকে প্রত্যেকে যা করেছে তার উপর ভিত্তি করে এটিই আমার দৃষ্টিভঙ্গি। ভাবছেন যে যদি 2020 এ পুনরায় রেন্ডারগুলি প্রতিরোধের জন্য নির্ভরতা হিসাবে অবস্থান ব্যবহার করে এটি একটি ভাল পদ্ধতির হয়ে থাকে?

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

function ScrollToTop( { children } ) {
    let location = useLocation();

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

    return children
}

Question 22

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

প্রপস পরিবর্তন না করা এবং উপাদানডিডআপডেট () গুলি চালানো না হলে এমন একটি সহজ সমাধান হতে পারে।

Question 23

এটি হ্যাকি (তবে কাজ করে): আমি কেবল যুক্ত করি

উইন্ডো.স্ক্রোলটো (0,0);

to reender ();