प्रतिक्रिया अनुप्रयोगों के लिए यूनिवर्सल रूटिंग

यदि आप संक्षेप में वर्णन करने का प्रयास करते हैं कि वेब अनुप्रयोगों के सामने के छोर पर रूटिंग फ़ंक्शन क्या है, तो आप इस निष्कर्ष पर आ सकते हैं कि प्रत्येक लोकप्रिय फ्रेमवर्क का इस बारे में पूरी तरह से अलग विचार है। यहां तक ​​कि समान ढांचे के संस्करणों की तुलना करते हुए, हम यह निष्कर्ष निकाल सकते हैं कि फ़ंक्शन और राउटिंग एपीआई परिवर्तन के लिए अतिसंवेदनशील होते हैं (अक्सर पिछड़े संगतता के बिना)। उदाहरण के लिए, रिएक्ट में राउटिंग के 4 वें संस्करण को इतने मौलिक रूप से पुन: डिज़ाइन किया गया था कि githab.com पर कुछ लोकप्रिय परियोजनाएं इस संस्करण पर स्विच नहीं हुईं।

इस सब के पीछे, एक सामान्य प्रवृत्ति है, जो, मेरी राय में, यह है कि कई लोकप्रिय फ्रंट-एंड फ्रेमवर्क में रूटिंग कार्यक्षमता अतिभारित है। इस संबंध में, यह अन्य घटकों के साथ कसकर जुड़ा हुआ है जिन्हें रूटिंग (उदाहरण के लिए, नेविगेशन, इतिहास, लिंक, आदि) से अलग किया जा सकता है। इसलिए, शायद, कई लोग उस भावना से परिचित हैं जब रूटिंग का उपयोग असहज हो जाता है, और इसका विस्तार बस असंभव है। लचीले और एक्स्टेंसिबल घटकों की तुलना में, लोकप्रिय फ्रंट-एंड फ्रेमवर्क में रूटिंग बहुत कम सुविधाजनक और विस्तार योग्य नहीं है। यह रिएक्ट में रूटिंग के पहले संस्करणों (4 वें तक) के लिए विशेष रूप से सच है।

इस पोस्ट में मैं कुछ ऐतिहासिक बिंदुओं पर गौर करूंगा, जिससे रूटिंग के साथ-साथ यूनिवर्सल-राउटर लाइब्रेरी के उपयोग के साथ-साथ रिएक्ट के मामलों की इस स्थिति का नेतृत्व किया गया।

क्या रूटिंग आवश्यक है?

तकनीकी रूप से, एक-पृष्ठ वेब अनुप्रयोग बिना रूटिंग के काम कर सकता है। उदाहरण के लिए, जैसा कि डेस्कटॉप एप्लिकेशन में कोई रूटिंग नहीं है। यदि एक-पृष्ठ वेब अनुप्रयोग एक ही वेब ब्राउज़र अनुप्रयोग नहीं बना रहता है तो सब कुछ लगभग ठीक चलेगा। यही है, उपयोगकर्ता किसी भी क्षण पृष्ठ को F5 कुंजी दबाकर या ब्राउज़र के "रीलोड" आइकन पर क्लिक करके ताज़ा कर सकता है। वैकल्पिक रूप से, उपयोगकर्ता "बाएं तीर" और "दाएँ तीर" आइकन पर क्लिक करके या "बैकस्पेस" कुंजी दबाकर किसी भी समय कहानी को आगे या पीछे स्क्रॉल कर सकता है।

इसलिए, एकल-पृष्ठ अनुप्रयोग के लिए, घटकों का एक परिवर्तन और अनुप्रयोग की आंतरिक स्थिति में परिवर्तन हमेशा url में परिवर्तन के साथ होना चाहिए।

रूटिंग क्यों है?

मेरी राय में, फ्रंट-एंड वेब अनुप्रयोगों के लिए लोकप्रिय रूपरेखाओं में रूटिंग फ़ंक्शन, क्लासिक वेब अनुप्रयोगों में राउटिंग (सर्वर रेंडरिंग के साथ) के ऐतिहासिक कनेक्शन से प्रभावित है।

प्रारंभ में, url एक स्थैतिक वेब दस्तावेज़ का वेब पता था, और यह बहुत सरल था। अगला, वेब पर MVC आर्किटेक्चर का अनुकूलन शुरू हुआ: मॉडल 1 और मॉडल 2। उनमें से अंतिम में एक फ्रंट कंट्रोलर शामिल है, जिसे बाद में दो भागों में विभाजित किया गया था: रूटिंग (जो वांछित नियंत्रक का चयन करता है) और नियंत्रक स्वयं, जो मॉडल के साथ काम करता है दृश्य प्रस्तुत करना। जैसा कि आप देख सकते हैं, एक क्लासिक वेब एप्लिकेशन में, राउटिंग एक्शन (नियंत्रक) को निर्धारित करता है और, अप्रत्यक्ष रूप से (कंट्रोलर के माध्यम से) सर्वर पर प्रदान किए जाने वाले दृश्य को निर्धारित करता है।

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

यूनिवर्सल-राउटर लाइब्रेरी क्या प्रदान करती है?

यूनिवर्सल-राउटर लाइब्रेरी उन सभी को त्यागने की पेशकश करती है जो अति-विशिष्ट हैं और केवल उस हिस्से को छोड़ दें जिसका उपयोग क्लाइंट के साथ और वेब सर्वर (सार्वभौमिक / आइसोमॉर्फिक वेब अनुप्रयोगों में) दोनों पर प्रदान करते समय या बिना किसी ढांचे के साथ किया जा सकता है।

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

import React from 'react'; import UniversalRouter from 'universal-router'; import App from './App'; import Link from './Link'; const routes = { path: '/', async action({next}) { const children = await next(); return ( <App> {children} </App> ); }, children: [ { path: '', async action() { return ( <div>Root route go to <Link href='/test'>Test</Link></div> ); }, }, { path: '/test', async action({next}) { const children = await next(); return ( <App> {children} </App> ); }, children: [ { path: '', async action() { return ( <div>Test route return to <Link href='/'>Root</Link></div> ); }, }, ] }, ], }; export const basename = ''; const router = new UniversalRouter(routes, { baseUrl: basename }); export default router; 

नेस्टेड रूट भी समर्थित हैं। उन्हें बच्चों के क्षेत्र में परिभाषित किया गया है, और आप उन्हें अगले () अतुल्यकालिक फ़ंक्शन को कॉल करके प्राप्त कर सकते हैं।

और यह कैसे प्रतिक्रिया के साथ काम करता है?

इतिहास के लिए नेविगेट () विधि को परिभाषित करें, हालांकि कई मामलों में यह देशी पुश () विधि का उपयोग करने के लिए पर्याप्त है

 import { createBrowserHistory } from 'history' import parse from 'url-parse' import deepEqual from 'deep-equal' const isNode = new Function('try {return this===global;}catch(e){return false;}') //eslint-disable-line let history if (!isNode()) { history = createBrowserHistory() history.navigate = function (path, state) { const parsedPath = parse(path) const location = history.location if (parsedPath.pathname === location.pathname && parsedPath.query === location.search && parsedPath.hash === location.hash && deepEqual(state, location.state)) { return } const args = Array.from(arguments) args.splice(0, 2) return history.push(...[path, state, ...args]) } } else { history = {} history.navigate = function () {} } export default history 

हम लिंक घटक भी बनाते हैं जो नेविगेशन को ट्रिगर करेगा:

 import React from 'react'; import {basename} from './router'; import history from './history'; function noOp(){}; const createOnClickAnchor = (callback) => { return (e) => { e.preventDefault(); history.navigate(e.currentTarget.getAttribute('href')); callback(e); }; }; export default ({href, onClick = noOp, children, ...rest}) => ( <a href={basename + href} onClick={createOnClickAnchor(onClick)} {...rest} > {children} </a> ); 

अब आप घटक को प्रस्तुत करने के लिए तैयार हैं:

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import history from './history'; import router from './router'; const render = async (location) => { const element = await router.resolve(location); ReactDOM.render( element, document.getElementById('root'), ); }; render(history.location); history.listen(render); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); 

प्रोजेक्ट कोड

उपयोगी लिंक

1. medium.com/@ippei.tanaka/universal-router-history-react-97ec79464573