বিক্রিয়া রাউটার এসপিএর জন্য কীভাবে স্ক্রোল পুনরুদ্ধার কার্যকর করা যায়

Question

আমি একটি প্রতিক্রিয়া একক পৃষ্ঠার অ্যাপ্লিকেশন তৈরি করছি এবং আমি লক্ষ্য করেছি যে স্ক্রোল পুনরুদ্ধারটি ক্রোমে প্রত্যাশিত (এবং সম্ভবত অন্যান্য ব্রাউজারগুলিতে) কাজ করে না appear

প্রতিক্রিয়া-রাউটার-ডোম গিথুব রেপোতে, তাদের একটি পৃষ্ঠা রয়েছে যা বলছে যে ব্রাউজারগুলি একক পৃষ্ঠাগুলির অ্যাপ্লিকেশনগুলির জন্য স্থানীয়ভাবে স্ক্রোলিং পরিচালনা করতে শুরু করে, এবং আচরণটি যদি কোনও history.scrollRestorationসেট করা হয় তবে এটি একটি traditionalতিহ্যবাহী অ-এসপিএ ওয়েব পৃষ্ঠার অনুরূপ হবে to auto।

আমার যে আচরণটি প্রয়োজন তা সেই পৃষ্ঠায় নির্দেশিত:

1. নেভিগেশনে স্ক্রোলিং আপ যাতে আপনি নীচে স্ক্রল করে একটি নতুন স্ক্রিন শুরু না করেন।
2. উইন্ডোটির স্ক্রোল অবস্থানগুলি পুনরুদ্ধার এবং "পিছনে" এবং "ফরোয়ার্ড" ক্লিকগুলিতে ওভারফ্লো উপাদানগুলি (তবে লিঙ্ক ক্লিকগুলি নয়!)

তবে আমার যে রুটে ট্যাব বা ক্যারোসেল রয়েছে সেগুলির জন্য আচরণও অক্ষম করতে হবে।

ইস্যুতে ক্রোমের স্পিকের একটি লিঙ্ক এখানে ।

আমি ওএস এক্স এর জন্য ক্রোম সংস্করণ 78.0.3904.97 (অফিসিয়াল বিল্ড) (-৪-বিট) এ যা পর্যবেক্ষণ করছি তা হ'ল history.scrollRestoration manualসেটিংস থেকে আমি প্রত্যাশা করব । এটি হ'ল, যখন আমি কোনও পৃষ্ঠার অর্ধেক পথ নীচে স্ক্রোল করি এবং আমি একটি লিঙ্কে ক্লিক করি, পরের পৃষ্ঠাটি পৃষ্ঠার অর্ধেক নীচে, পূর্ববর্তী পৃষ্ঠার ঠিক একই বিন্দুতে স্ক্রোল করা হয়।

আমি history.scrollRestorationবিভিন্ন পয়েন্টে এটি পরীক্ষা করে দেখেছি এটি আরম্ভ হয় এবং স্থিত হয় auto, ডিফল্ট,

এখানে তাত্পর্যপূর্ণ একটি বিষয় হ'ল @ ট্রেভররোবিনসনের জবাব থেকে "ব্রাউজারের স্বয়ংক্রিয় প্রচেষ্টা স্ক্রোল পুনরুদ্ধার ... ... বেশিরভাগই একক পৃষ্ঠার অ্যাপ্লিকেশনগুলির জন্য কাজ করে না ..." ঠিক আছে ... আমি এর জন্য সামঞ্জস্যপূর্ণ সমর্থন পেয়েছি history.scrollRestorationতবে স্পষ্টতই ব্রাউজারগুলি স্ক্রোল পুনরুদ্ধার করতে কৃপিত। তারপরে এটি এখানে উল্লেখ করা উচিত , যা আমার সময়কে বাঁচাতে পারত।

তারপরে আমি নিজে থেকে এটি করার উপায়গুলি অনুসন্ধান করি এবং আমি এগিয়ে যাওয়ার পথটি পরিষ্কার করি না। react-router-scrollবলে যে এটি প্রতিক্রিয়া রাউটার ভি 4 এর সাথে সামঞ্জস্যপূর্ণ নয়, তবে ভি 5 এর উল্লেখ নেই, যা এই প্রশ্ন হিসাবে বর্তমান। সুতরাং আমি কি ধরে নিতে হবে ভি 5 এছাড়াও উপযুক্ত নয়?

সুতরাং আমি আরও এগিয়ে যাওয়ার পথের জন্য আরও তাকিয়েছি, এবং কীভাবে প্রতিক্রিয়া রাউটার ভি 4 এর সাথে স্ক্রোল পুনরুদ্ধার পরিচালনা করবেন সে সম্পর্কে এই উত্তরটি পেয়েছি ... আমি কি ধরে নিতে পারি যে প্রতিক্রিয়া রাউটার ভি 5 এর সাথে কাজ করবে ? আপডেট: এটি v5 এ আমার জন্য কাজ করে না বলে মনে হয়। আমি বেশ কয়েকটি কনফিগারেশন চেষ্টা করেছি। আমি এটি সম্পূর্ণরূপে প্রতিক্রিয়া রাউটার ভি 4 এর সাথে কাজ করতে পারি না। আমি জানতাম যে এটি কমপক্ষে জীবিত হয়েছে, কারণ এটি কোনও নতুন পৃষ্ঠায় শীর্ষে স্ক্রোল হয়েছে, তবে ইতিহাসে পুনরুদ্ধারটি ঘটে না।

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

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

আমি কি কিছু উপেক্ষা করেছি? এই সমস্যাটি মোকাবেলার জন্য আদর্শ কী, কারণ এই বৈশিষ্ট্যটির প্রয়োজন আমিই হতে পারি না । দেখে মনে হচ্ছে আমি প্রচুর এবং পরীক্ষামূলক কিছু করছি, তবে একটি সাধারণ সাইটের মতো স্ক্রোল করার জন্য আমার কেবল আমার সাইটটি দরকার।

Comments

আপনার একটি নেক্সটজ দেখতে হবে , তারা ইতিহাসকে ক্যাশে করার মাধ্যমে এটি প্রয়োগ করেছে।

— জুরিয়ান

শান্ত! আমি যখন এই প্রকল্প থেকে নামতে পারি তখন আমি আরও ঘুরে দেখুন take

— বিবিসিঞ্জার

Answer 1

এটি করার একটি উপায় ওফ-রিএ্যাক্ট-রাউটার দিয়ে । shouldHandleActionসেটিংসে বিকল্পগুলি ব্যবহার করুন। ফাংশনটি পাস হয়ে যায় previousLocationএবং nextLocationযা আপনি স্ক্রোলটি পুনরায় সেট করা / পুনরুদ্ধার করা উচিত তা নির্ধারণ করতে ব্যবহার করতে পারেন, এবং falseনা হলে ফিরে আসুন ।

const history = createBrowserHistory();

const settings = {
   shouldHandleAction: (previousLocation, nextLocation) => {
       // Inspect/compare nextLocation and/or previousLocation.
       return false // false if you don't want scroll restoration.
   }
};

wrapHistory(history, settings);

ওএফ-রিএ্যাক্ট-রাউটার রিঅ্যাক্ট রাউটার ভি 4 এবং ভি 5 এর সাথে কাজ করে এবং অ্যাক্সেসিবিলিটি পরিচালনা করে, যেখানে অনেক এসপিএ রাউটারগুলি না করে, তাই এটি এই সময়ে সবচেয়ে সম্পূর্ণ সমাধান হতে পারে।

কৌতূহলজনকভাবে, ডকুমেন্টেশনগুলি এই বৈশিষ্ট্যটিতে বিশদভাবে বর্ণনা করে না।

অন্য কারও যদি এমন সমাধান থাকে যা কাজ করে এবং এটি একটি মানক হিসাবে বিবেচিত হয় তবে দয়া করে এটির সাথে এখানে একটি উত্তর সরবরাহ করুন এবং আমি নির্বাচিত উত্তরটি পরিবর্তন করার বিষয়টি বিবেচনা করব।