উত্তর:
window.location.href আপনি যা খুঁজছেন
req.originalUrlএক্সপ্রেস বা হোয়াট নোটের মতো কিছু ব্যবহার করতে হবে। এসএসআর সমর্থনযুক্ত বিভিন্ন প্রতিক্রিয়াশীল রাউটিং লাইব্রেরিতে এই তথ্য পাওয়ার জন্য পদ্ধতি রয়েছে।
আপনার যদি আপনার URL টির পুরো পথ প্রয়োজন হয় তবে আপনি ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন:
window.location.href
স্রেফ পাথ (বিয়োগের ডোমেন নাম) পেতে, আপনি ব্যবহার করতে পারেন:
window.location.pathname
console.log(window.location.pathname); //yields: "/js" (where snippets run)
console.log(window.location.href); //yields: "https://stacksnippets.net/js"উত্স: অবস্থানের নামের সম্পত্তি - ডাব্লু 3 স্কুল
আপনি যদি ইতিমধ্যে "প্রতিক্রিয়া-রাউটার" ব্যবহার না করে থাকেন তবে আপনি এটি ব্যবহার করে এটি ইনস্টল করতে পারেন:
yarn add react-router
তারপরে একটি প্রতিক্রিয়াতে within "রুট" এর মধ্যে থাকা অংশে, আপনি কল করতে পারেন:
this.props.location.pathname
এটি পথটি দেয়, ডোমেন নাম অন্তর্ভুক্ত করে না।
ধন্যবাদ @ আবদুল্লা-জুলকারনাইন!
window.location.pathname
this.props.locationএকটি প্রতিক্রিয়া-রাউটার বৈশিষ্ট্য , আপনি যদি এটি ব্যবহার করতে চান তবে আপনাকে ইনস্টল করতে হবে।
দ্রষ্টব্য: সম্পূর্ণ url ফেরত দেয় না doesn't
আপনি পাচ্ছেন undefinedকারণ আপনার সম্ভবত প্রতিক্রিয়া রাউটারের বাইরের উপাদান রয়েছে।
মনে রাখবেন যে আপনাকে যে উপাদানটি থেকে কল করছেন this.props.locationএটি কোনও <Route />উপাদানগুলির মধ্যে রয়েছে তা নিশ্চিত করা দরকার :
<Route path="/dashboard" component={Dashboard} />
তারপরে ড্যাশবোর্ড উপাদানটির ভিতরে আপনার প্রবেশাধিকার রয়েছে this.props.location...
<Route />আপনি রাউটার উচ্চতর অর্ডার উপাদান ব্যবহার করতে পারেন ।
পেতে বর্তমান রাউটার উদাহরণস্বরূপ বা বর্তমান অবস্থান আপনার সাথে একটি উচ্চ অর্ডার উপাদান তৈরি করতে withRouter থেকে react-router-dom। অন্যথায়, আপনি যখন অ্যাক্সেস করার চেষ্টা করছেন তখন this.props.locationএটি ফিরে আসবে undefined
উদাহরণ
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class className extends Component {
render(){
return(
....
)
}
}
export default withRouter(className)এই পৃষ্ঠায় কেবল আরও ডকুমেন্টেশন যুক্ত করতে - আমি এই সমস্যাটির সাথে কিছুক্ষণ লড়াই করছি।
উপরে যেমন বলা হয়েছে, ইউআরএল পাওয়ার সহজতম উপায় হল window.location.href।
এরপরে আমরা ব্যবহার করে ভ্যানিলা জাভাস্ক্রিপ্টের মাধ্যমে ইউআরএল এর কিছু অংশ বের করতে পারি let urlElements = window.location.href.split('/')
আমরা তখন console.log(urlElements)ইউআরএলে .split () কল করে উত্পাদিত উপাদানের অ্যারে দেখতে চাই।
অ্যারেতে আপনি যে সূচকটি অ্যাক্সেস করতে চান তা একবার খুঁজে পেয়েছেন, তারপরে আপনি এটি ভেরিয়েবলের জন্য নির্ধারণ করতে পারেন
let urlElelement = (urlElements[0])এবং এখন আপনি urlElement এর মানটি ব্যবহার করতে পারেন যা আপনার URL- এর নির্দিষ্ট অংশ হবে, আপনি যেখানেই চান।
অন্য কারও হিসাবে উল্লেখ করা হয়েছে, প্রথমে আপনার react-routerপ্যাকেজ দরকার । তবে locationআপত্তি করুন যে এটি আপনাকে পার্সড ইউআরএল সরবরাহ করে।
তবে আপনি যদি বিশ্বব্যাপী ভেরিয়েবলগুলি অ্যাক্সেস না করেই পুরো ইউআরএলটি খারাপভাবে চান তবে আমি বিশ্বাস করি যে এটি করার দ্রুততম উপায়
...
const getA = memoize(() => document.createElement('a'));
const getCleanA = () => Object.assign(getA(), { href: '' });
const MyComponent = ({ location }) => {
const { href } = Object.assign(getCleanA(), location);
...href একটি সম্পূর্ণ url সমেত এটি।
যেহেতু memoizeআমি সাধারণত ব্যবহার করি lodash, এটি প্রায়শই প্রয়োজন ছাড়াই নতুন উপাদান তৈরি এড়াতে সেভাবে কার্যকর করা হয়।
পিএস: অবশ্যই আপনি প্রাচীন ব্রাউজারগুলির দ্বারা সীমাবদ্ধ নয় যা আপনি চেষ্টা করতে চাইতে পারেন new URL()তবে মূলত পুরো পরিস্থিতি কমবেশি অর্থহীন, কারণ আপনি এক বা অন্য উপায়ে বৈশ্বিক চলক অ্যাক্সেস করেন। তার window.location.hrefপরিবর্তে কেন ব্যবহার করবেন না?
আপনি 'ডকুমেন্ট.আরফেরার' দিয়ে পুরো ইউরি / ইউআরএল অ্যাক্সেস করতে পারেন
পরীক্ষা করে দেখুন https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer