আপনি যদি ব্রাউজারের পরিবেশগুলিকে লক্ষ্য করে তুলছেন তবে এর react-router-domপরিবর্তে আপনার প্যাকেজটি ব্যবহার করা দরকার react-router। কোর, ( react) এবং প্ল্যাটফর্ম নির্দিষ্ট কোডটিকে আলাদা করার জন্য তারা প্রতিক্রিয়ার মতো একই পদ্ধতি অনুসরণ করছে , ( react-dom, react-native) যে দুটি সূক্ষ্ম পার্থক্যের সাথে আপনাকে দুটি পৃথক প্যাকেজ ইনস্টল করতে হবে না, তাই পরিবেশ প্যাকেজগুলিতে সমস্ত কিছু রয়েছে তোমার দরকার. আপনি আপনার প্রকল্পে এটি যুক্ত করতে পারেন:
yarn add react-router-dom
অথবা
npm i react-router-dom
আপনাকে প্রথমে যা করতে হবে তা হ'ল <BrowserRouter>আপনার আবেদনের শীর্ষ পিতামাতার উপাদান হিসাবে একটি সরবরাহ করা। <BrowserRouter>এইচটিএমএল 5 historyএপিআই ব্যবহার করে এবং এটি আপনার জন্য পরিচালিত করে, তাই আপনাকে এটি নিজে ইনস্ট্যান্ট করার এবং <BrowserRouter>প্রপ হিসাবে এটি উপাদানটিকে সরবরাহ করার বিষয়ে চিন্তা করার দরকার নেই (পূর্ববর্তী সংস্করণগুলিতে আপনাকে যেমন করার দরকার ছিল)।
ভি 4-তে, প্রোগ্রামক্রমেটিকভাবে নেভিগেশনের জন্য আপনাকে historyঅবজেক্টটি অ্যাক্সেস করতে হবে যা রিএ্যাক্টের মাধ্যমে পাওয়া যায় context, যতক্ষণ না আপনার অ্যাপ্লিকেশনে শীর্ষস্থানীয় পিতা-মাতার হিসাবে কোনও <BrowserRouter> সরবরাহকারী উপাদান রয়েছে। লাইব্রেরিটি প্রসঙ্গের মাধ্যমে routerঅবজেক্টটি প্রকাশ করে , এতে নিজেই historyএকটি সম্পত্তি হিসাবে থাকে । historyইন্টারফেস যেমন বিভিন্ন গৌণ পদ্ধতি, উপলব্ধ করা হয় push, replaceএবং goBackঅন্যদের মধ্যে। আপনি এখানে সম্পত্তি এবং পদ্ধতিগুলির সম্পূর্ণ তালিকাটি পরীক্ষা করতে পারেন ।
Redux / Mobx ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ নোট
আপনি যদি আপনার অ্যাপ্লিকেশনটিতে রিডেক্স বা মুবক্সকে আপনার রাজ্য পরিচালনা গ্রন্থাগার হিসাবে ব্যবহার করছেন তবে আপনি এমন উপাদানগুলি নিয়ে আসতে পারেন যেগুলি অবস্থান-সচেতন হওয়া উচিত তবে ইউআরএল আপডেট ট্রিগার করার পরে পুনরায় রেন্ডার করা হয়নি
এটি ঘটছে কারণ প্রসঙ্গ মডেল ব্যবহার করে উপাদানগুলিতে react-routerযায় location।
সংযুক্ত এবং পর্যবেক্ষক উভয়ই উপাদান তৈরি করেন যার উচিতসামগ্রী আপডেটের পদ্ধতিগুলি তাদের বর্তমান প্রপস এবং তাদের পরবর্তী প্রপসের একটি অগভীর তুলনা করে। কমপক্ষে একটি প্রপ পরিবর্তিত হলে সেই উপাদানগুলি পুনরায় রেন্ডার করবে। এর অর্থ হ'ল লোকেশন পরিবর্তনের সময় তারা আপডেট হয় তা নিশ্চিত করার জন্য, লোকেশন পরিবর্তনের সাথে সাথে তাদের এমন একটি প্রপ দেওয়া হবে যা স্থান পরিবর্তন করে।
এটি সমাধানের জন্য দুটি পন্থা হ'ল:
- আপনার সংযুক্ত উপাদানটিকে একটি নির্বিঘ্নে মোড়ানো
<Route />। বর্তমান locationঅবজেক্টটি এমন একটি প্রপস যা <Route>এটির সরবরাহকারী উপাদানটিকে পাস করে
- আপনার সংযুক্ত উপাদানটিকে
withRouterউচ্চতর-অর্ডার উপাদান দিয়ে মুড়িয়ে দিন , বাস্তবে একই প্রভাব রয়েছে এবং locationপ্রপ হিসাবে ইনজেকশন দেয়
এটিকে নির্ধারণ করে, প্রস্তাবক্রমে আদেশক্রমে অগ্রগতিযুক্ত নেভিগেটের চারটি উপায় রয়েছে:
1.- একটি <Route>উপাদান ব্যবহার
এটি একটি ঘোষণামূলক শৈলীর প্রচার করে। ভি 4 এর আগে,
<Route />উপাদানগুলি আপনার উপাদানগুলির ক্রমবিন্যাসের শীর্ষে স্থাপন করা হয়েছিল, আপনার রুটগুলির কাঠামোর আগেই ভাবতে হবে। তবে, এখন আপনার গাছের
যে কোনও জায়গায়<Route> উপাদান থাকতে পারে , আপনাকে ইউআরএলের উপর নির্ভর করে শর্তাধীন রেন্ডারিংয়ের জন্য আরও ভাল নিয়ন্ত্রণ রাখতে দেয়। উদ্বুদ্ধ , এবং আপনার উপাদান মধ্যে সাজসরঞ্জাম হিসাবে। ন্যাভিগেশন পদ্ধতি (যেমন , , ...) বৈশিষ্ট্য পাওয়া যায় অবজেক্ট।
RoutematchlocationhistorypushreplacegoBackhistory
একটি দিয়ে কিছু সরবরাহ করার জন্য 3 টি উপায় রয়েছে Route, হয় হয় বা প্রপস ব্যবহার করে component, তবে একইরকম একের বেশি ব্যবহার করবেন না । পছন্দটি ব্যবহারের ক্ষেত্রে নির্ভর করে, তবে মূলত দুটি দুটি বিকল্প কেবল তখনই আপনার উপাদানটিকে রেন্ডার করবে যদি ইউআরএল অবস্থানের সাথে মেলে তবে উপাদানটির সাথে এই স্থানটি রেন্ডার করা হবে যে পথটি অবস্থানটির সাথে মেলে কিনা বা না (ইউআরএল ভিত্তিক ইউআই সামঞ্জস্য করার জন্য দরকারী) ম্যাচিং)।renderchildrenRoutepathchildren
আপনি আপনার উপাদান রেন্ডারিং আউটপুট কাস্টমাইজ করতে চান , আপনি একটি ফাংশন আপনার উপাদান মোড়ানো প্রয়োজন এবং ব্যবহার renderবিকল্প, ক্রমে আপনার উপাদান অন্য কোন সাজসরঞ্জাম আপনি বাদে ইচ্ছা করছে, পাস match, locationএবং history। উদাহরণস্বরূপ উদাহরণ:
import { BrowserRouter as Router } from 'react-router-dom'
const ButtonToNavigate = ({ title, history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
{title}
</button>
);
const SomeComponent = () => (
<Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)
const App = () => (
<Router>
<SomeComponent /> // Notice how in v4 we can have any other component interleaved
<AnotherComponent />
</Router>
);
২.- withRouterহউক ব্যবহার করা
এই উচ্চতর অর্ডার উপাদানটি একই প্রসাকে ইনজেক্ট করবে Route। যাইহোক, এটি সীমাবদ্ধতার সাথে বহন করে যে আপনার প্রতি ফাইল প্রতি 1 জন হউক থাকতে পারে।
import { withRouter } from 'react-router-dom'
const ButtonToNavigate = ({ history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
Navigate
</button>
);
ButtonToNavigate.propTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired,
}),
};
export default withRouter(ButtonToNavigate);
3.- একটি Redirectউপাদান ব্যবহার
একটি রেন্ডারিং একটি
<Redirect>নতুন স্থানে নেভিগেট করবে। তবে মনে রাখবেন যে,
ডিফল্টরূপে , বর্তমান স্থানটি সার্ভার-সাইড রিডাইরেক্টস (HTTP 3xx) এর মতো নতুন দ্বারা প্রতিস্থাপিত হয়। নতুন অবস্থানটি
toপ্রোপ দ্বারা সরবরাহ করা হয়েছে , এটি স্ট্রিং (পুনর্নির্দেশের URL) বা কোনও
locationঅবজেক্ট হতে পারে। পরিবর্তে আপনি যদি
ইতিহাসের উপরে একটি নতুন এন্ট্রি চাপতে চান তবেpush পাশাপাশি একটি প্রপও পাস করুন এবং সেট করুন
true
<Redirect to="/your-new-location" push />
৪- routerপ্রসঙ্গে ম্যানুয়ালি অ্যাক্সেস করা
কিছুটা নিরুৎসাহিত করা হয়েছে কারণ
প্রসঙ্গটি এখনও একটি পরীক্ষামূলক এপিআই এবং এটি ভবিষ্যতে প্রতিক্রিয়া প্রকাশের ক্ষেত্রে বিরতি / পরিবর্তন হতে পারে
const ButtonToNavigate = (props, context) => (
<button
type="button"
onClick={() => context.router.history.push('/my-new-location')}
>
Navigate to a new location
</button>
);
ButtonToNavigate.contextTypes = {
router: React.PropTypes.shape({
history: React.PropTypes.object.isRequired,
}),
};
এটির বলার অপেক্ষা রাখে না যে অন্যান্য রাউটার উপাদানগুলি ব্রাউজার নন-ইকোসিস্টেমগুলির জন্য বোঝানো হয়েছে, যেমন মেমরিতে<NativeRouter> নেভিগেশন স্ট্যাকের প্রতিরূপ তৈরি করে এবং প্যাকেজের মাধ্যমে উপলব্ধ নেটিভ প্ল্যাটফর্মকে লক্ষ্য করে ।react-router-native
পরবর্তী কোনও রেফারেন্সের জন্য, সরকারী দস্তাবেজগুলি একবার দেখে নিতে দ্বিধা করবেন না । লাইব্রেরির অন্যতম সহ-লেখক দ্বারা তৈরি করা একটি ভিডিও রয়েছে যা কিছু বড় বড় পরিবর্তনগুলি হাইলাইট করে রিঅ্যাক্ট-রাউটার ভি 4 এর জন্য দুর্দান্ত শীতল ভূমিকা সরবরাহ করে।