প্রযুক্তিগতভাবে সঠিক হওয়ার পরে, অন্যান্য উত্তরগুলি অ্যাঙ্গুলারের ইউআরএল-থেকে-রুটের মিলের ব্যাখ্যা থেকে উপকৃত হবে। আমি মনে করি না যে আপনি pathMatch: full
রাউটারটি প্রথম স্থানে কীভাবে কাজ করে তা আপনি যদি না জানেন তবে আপনি সম্পূর্ণরূপে (পাং ক্ষমা করে দিতে পারেন ) বুঝতে পারে understand
প্রথমে কয়েকটি প্রাথমিক বিষয় সংজ্ঞায়িত করা যাক। আমরা একটি উদাহরণ হিসাবে এই URL ব্যবহার করব: /users/james/articles?from=134#section
।
এটি সুস্পষ্ট হতে পারে তবে প্রথমে চিহ্নিত করা যাক যে ক্যোয়ারী প্যারামিটারগুলি ( ?from=134
) এবং টুকরা ( #section
) পাথ মেলানোর ক্ষেত্রে কোনও ভূমিকা রাখে না । কেবলমাত্র বেস ইউআরএল ( /users/james/articles
) গুরুত্বপূর্ণ।
কৌণিক URL গুলিকে বিভাগগুলিতে বিভক্ত করে । এর বিভাগগুলি /users/james/articles
অবশ্যই users
, james
এবং articles
।
রাউটার কনফিগারেশনটি একটি একক রুট নোড সহ একটি গাছের কাঠামো। প্রতিটি Route
বস্তু হ'ল নোড, যার children
নোড থাকতে পারে যার children
ফলস্বরূপ অন্যগুলি বা পাতার নোড থাকতে পারে।
রাউটারটির লক্ষ্য হ'ল রুট নোড থেকে শুরু করে একটি রাউটার কনফিগারেশন শাখা খুঁজে পাওয়া , যা ইউআরএল এর ঠিক সমস্ত (!!!) বিভাগের সাথে মেলে । এটি অত্যন্ত গুরুত্বপূর্ণ! যদি কৌণিকর কোনও রুট কনফিগারেশন শাখার সন্ধান না করে যা পুরো ইউআরএলটির সাথে মিল রাখতে পারে - আরও এবং কম কিছু না - এটি কোনও কিছুই রেন্ডার করবে না ।
যেমন আপনার লক্ষ্য URL টি হলে /a/b/c
কিন্তু রাউটার শুধুমাত্র মেলে পারেন সক্ষম হয় /a/b
বা /a/b/c/d
তাহলে, কোন ম্যাচ এবং আবেদন কিছু রেন্ডার করা হবে না হয়।
অবশেষে, রুটগুলি নিয়মিত রুটের তুলনায় কিছুটা আলাদা redirectTo
আচরণ করে এবং আমার কাছে মনে হয় যে এগুলিই কেবল এমন এক জায়গা হবে যেখানে যে কেউ সত্যই ব্যবহার করতে চান । তবে আমরা এটি পরে পেতে হবে।pathMatch: full
ডিফল্ট ( prefix
) পাথের মিল
নামের পিছনে যুক্তি prefix
হ'ল এই জাতীয় রুট কনফিগারেশনটি পরীক্ষা করা হবে কিনা তা কনফিগার path
করা বাকি ইউআরএল বিভাগগুলির উপসর্গ কিনা। তবে রাউটারটি কেবলমাত্র পুরো বিভাগগুলিকেই মেলে সক্ষম , যা এই নামকরণটিকে কিছুটা বিভ্রান্ত করে তোলে।
যাইহোক, যাক এটি আমাদের রুট-লেভেল রাউটার কনফিগারেশন:
const routes: Routes = [
{
path: 'products',
children: [
{
path: ':productID',
component: ProductComponent,
},
],
},
{
path: ':other',
children: [
{
path: 'tricks',
component: TricksComponent,
},
],
},
{
path: 'user',
component: UsersonComponent,
},
{
path: 'users',
children: [
{
path: 'permissions',
component: UsersPermissionsComponent,
},
{
path: ':userID',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
],
},
];
নোট করুন যে Route
এখানে প্রতিটি একক ডিফল্ট ডিফল্ট ম্যাচ কৌশলটি ব্যবহার করে prefix
। এই কৌশলটির অর্থ রাউটারটি পুরো কনফিগারেশন গাছের উপরে পুনরাবৃত্তি করে এবং URL টি সম্পূর্ণরূপে মেলে না যাওয়া অবধি বিভাগের দ্বারা লক্ষ্য URL বিভাগের সাথে এটির সাথে মিলানোর চেষ্টা করে । এই উদাহরণটির জন্য এটি কীভাবে করা হবে তা এখানে রয়েছে:
- প্রথম ইউআরএল বিভাগের জন্য একটি সঠিক মিলের জন্য সন্ধান করে মূল অ্যারের উপরে আইট্রেট করুন -
users
।
'products' !== 'users'
, তাই যে শাখা এড়িয়ে যান। নোট করুন যে আমরা একটি .startsWith()
বা .includes()
- সম্পূর্ণ বিভাগের সাথে মেলে গণনার চেয়ে সাম্যতা পরীক্ষা ব্যবহার করছি !
:other
যে কোনও মানের সাথে মেলে, তাই এটি একটি মিল। তবে লক্ষ্যযুক্ত ইউআরএল এখনও পুরোপুরি মেলে না (আমাদের এখনও মেলাতে হবে james
এবং articles
), এইভাবে রাউটারটি বাচ্চাদের সন্ধান করে।
- শুধুমাত্র সন্তান
:other
হয় tricks
, যা !== 'james'
অত: পর একটি ম্যাচ না।
- কৌণিক তারপর মূল অ্যারে ফিরে retraces এবং সেখান থেকে অবিরত।
'user' !== 'users
, শাখা বাদ দিন।
'users' === 'users
- বিভাগটি মেলে। তবে এটি এখনও পুরো ম্যাচ নয়, সুতরাং আমাদের বাচ্চাদের সন্ধান করা প্রয়োজন (৩ য় ধাপের মতো)।
'permissions' !== 'james'
, বাদ দাও.
:userID
যে কোনও কিছুর সাথে মেলে, সুতরাং আমাদের james
বিভাগটির জন্য একটি ম্যাচ আছে । তবে এটি এখনও পুরো ম্যাচ নয়, সুতরাং আমাদের এমন একটি সন্তানের সন্ধান করা দরকার যা মেলে articles
।
- আমরা দেখতে পাচ্ছি যে
:userID
এটির একটি শিশু পথ রয়েছে articles
, যা আমাদের পুরো ম্যাচ দেয়! এইভাবে আবেদনটি রেন্ডার করে UserArticlesComponent
।
সম্পূর্ণ ইউআরএল ( full
) মিলছে
উদাহরণ 1
এখন ভাবুন যে users
রুট কনফিগারেশন অবজেক্টটি এরকম দেখাচ্ছে:
{
path: 'users',
component: UsersComponent,
pathMatch: 'full',
children: [
{
path: 'permissions',
component: UsersPermissionsComponent,
},
{
path: ':userID',
component: UserComponent,
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
],
}
এর ব্যবহারটি নোট করুন pathMatch: full
। যদি এটি হয় তবে 1-5 পদক্ষেপ একই হবে তবে 6 ধাপটি আলাদা হবে:
'users' !== 'users/james/articles
- বিভাগটি মেলে না কারণ পথের users
সাথে কনফিগারেশন রয়েছেpathMatch: full
পুরো URL- এর মেলে না, যা users/james/articles
।
- কোনও মিল নেই বলে আমরা এই শাখাটি বাদ দিচ্ছি ipping
- এই মুহুর্তে আমরা কোনও মিল খুঁজে না পেয়ে রাউটার কনফিগারেশনের শেষে পৌঁছেছি। অ্যাপ্লিকেশন কিছুই রেন্ডার করে ।
উদাহরণ 2
পরিবর্তে আমাদের যদি এটি থাকে তবে কী হবে:
{
path: 'users/:userID',
component: UsersComponent,
pathMatch: 'full',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
}
users/:userID
pathMatch: full
শুধুমাত্র ম্যাচগুলির সাথেusers/james
এইভাবে এটি একটি আবার নো মেলে, এবং আবেদন কিছুই রেন্ডার করে।
উদাহরণ 3
আসুন এটি বিবেচনা করুন:
{
path: 'users',
children: [
{
path: 'permissions',
component: UsersPermissionsComponent,
},
{
path: ':userID',
component: UserComponent,
pathMatch: 'full',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
],
}
এক্ষেত্রে:
'users' === 'users
- বিভাগটি মেলে, তবে james/articles
এখনও মেলে না। আসুন বাচ্চাদের সন্ধান করি।
'permissions' !== 'james'
- এড়িয়ে যান
:userID'
শুধুমাত্র একটি একক বিভাগে মেলে, যা হতে পারে james
। তবে এটি একটি pathMatch: full
রুট এবং এটি অবশ্যই মিলবে james/articles
(পুরো অবশিষ্ট URL টি)। এটি এটি করতে সক্ষম নয় এবং সুতরাং এটি কোনও মিল নয় (তাই আমরা এই শাখাটি এড়িয়ে যাচ্ছি)!
- আবার, আমরা URL- এর কোনও মিল খুঁজে পাইনি এবং অ্যাপ্লিকেশন কিছুই রেন্ডার করে না ।
আপনি যেমন খেয়াল করেছেন, একটি pathMatch: full
কনফিগারেশন মূলত এটি বলছে:
আমার বাচ্চাদের উপেক্ষা করুন এবং কেবল আমার সাথে মেলে। যদি আমি নিজে থেকে বাকি সমস্ত ইউআরএল সেগমেন্টের সাথে মেলে না রাখতে পারি তবে এগিয়ে যান।
পুনঃনির্দেশ
যে কোনও Route
একটি সংজ্ঞায়িত করেছে redirectTo
সেগুলি একই নীতি অনুসারে টার্গেট URL এর সাথে মিলবে। এখানে কেবল পার্থক্যটি হ'ল পুনঃনির্দেশটি সেগমেন্টের সাথে ম্যাচ করার সাথে সাথেই প্রয়োগ করা হবে । এর অর্থ হ'ল যদি কোনও পুনর্নির্দেশের রুট ডিফল্ট prefix
কৌশল ব্যবহার করে তবে একটি পুনর্নির্দেশের কারণ হিসাবে আংশিক মিল যথেষ্ট । এখানে একটি ভাল উদাহরণ:
const routes: Routes = [
{
path: 'not-found',
component: NotFoundComponent,
},
{
path: 'users',
redirectTo: 'not-found',
},
{
path: 'users/:userID',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
];
আমাদের প্রাথমিক URL ( /users/james/articles
) এর জন্য, এখানে কী হবে:
'not-found' !== 'users'
- বাদ দাও.
'users' === 'users'
- আমাদের একটা ম্যাচ আছে
- এই ম্যাচটিতে একটি রয়েছে
redirectTo: 'not-found'
যা অবিলম্বে প্রয়োগ করা হয় ।
- লক্ষ্য URL- এ পরিবর্তন
not-found
।
- রাউটারটি আবার মিলতে শুরু করে এবং এখনই একটি ম্যাচ খুঁজে বের
not-found
করে। আবেদনটি রেন্ডার করে NotFoundComponent
।
এখন বিবেচনা করুন যদি এই users
রুটেও থাকে তবে কি হবে pathMatch: full
:
const routes: Routes = [
{
path: 'not-found',
component: NotFoundComponent,
},
{
path: 'users',
pathMatch: 'full',
redirectTo: 'not-found',
},
{
path: 'users/:userID',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
];
'not-found' !== 'users'
- বাদ দাও.
users
ইউআরএল এর প্রথম বিভাগটি মিলবে, তবে রুট কনফিগারেশনের জন্য একটি full
ম্যাচ প্রয়োজন , সুতরাং এড়িয়ে যান।
'users/:userID'
ম্যাচ users/james
। articles
এখনও মিলছে না তবে এই রুটে শিশু রয়েছে।
- আমরা
articles
বাচ্চাদের মধ্যে একটি মিল খুঁজে পাই। পুরো URL টি এখন মিলছে এবং অ্যাপ্লিকেশনটি রেন্ডার করে UserArticlesComponent
।
খালি পথ ( path: ''
)
খালি পথটি একটি বিশেষ কেস কারণ এটি কোনও " সেগমেন্ট " না করেই যে কোনও বিভাগকে মেলাতে পারে (সুতরাং এটি বাচ্চাদের আবার সেই বিভাগটির সাথে মেলাতে হবে)। এই উদাহরণ বিবেচনা করুন:
const routes: Routes = [
{
path: '',
children: [
{
path: 'users',
component: BadUsersComponent,
}
]
},
{
path: 'users',
component: GoodUsersComponent,
},
];
ধরা যাক আমরা অ্যাক্সেসের চেষ্টা করছি /users
:
path: ''
সর্বদা মিলবে, এইভাবে রুট মেলে। তবে পুরো URL টি মিলছে না - আমাদের এখনও ম্যাচ করা দরকারusers
!
- আমরা দেখতে পাচ্ছি যে একটি শিশু রয়েছে
users
, যা বাকী (এবং কেবল!) বিভাগের সাথে মেলে এবং আমাদের একটি পুরো ম্যাচ আছে। আবেদনটি রেন্ডার করে BadUsersComponent
।
এখন মূল প্রশ্নে ফিরে আসুন
ওপি এই রাউটার কনফিগারেশন ব্যবহার করেছে:
const routes: Routes = [
{
path: 'welcome',
component: WelcomeComponent,
},
{
path: '',
redirectTo: 'welcome',
pathMatch: 'full',
},
{
path: '**',
redirectTo: 'welcome',
pathMatch: 'full',
},
];
যদি আমরা মূল ইউআরএল ( /
) তে নেভিগেট করে থাকি তবে রাউটার কীভাবে সমাধান করবে তা এখানে রয়েছে:
welcome
খালি খণ্ডের সাথে মেলে না, তাই এড়িয়ে যান।
path: ''
খালি খণ্ডের সাথে মেলে। এটির একটি রয়েছে pathMatch: 'full'
যা আমরা পুরো ইউআরএলের সাথে মিলে যাওয়ায় সন্তুষ্ট (এটির একটি খালি খণ্ড ছিল)।
- পুনর্নির্দেশ
welcome
ঘটে এবং অ্যাপ্লিকেশন রেন্ডার হয় WelcomeComponent
।
না থাকলে কী হত pathMatch: 'full'
?
আসলে, একজন পুরো জিনিসটি একই রকম আচরণ করবে বলে আশা করবে। তবে, কৌণিক স্পষ্টভাবে এই জাতীয় কনফিগারেশন ( { path: '', redirectTo: 'welcome' }
) রোধ করে কারণ আপনি যদি এটি Route
উপরে রাখেন তবে welcome
এটি তাত্ত্বিকভাবে পুনঃনির্দেশগুলির একটি অন্তহীন লুপ তৈরি করবে। সুতরাং কৌণিক মাত্র একটি ত্রুটি নিক্ষেপ করে , যার কারণে অ্যাপ্লিকেশনটি মোটেই কাজ করবে না! ( https://angular.io/api/router/Route#pathMatch )
আসলে, এটি আমার কাছে খুব বেশি বোঝায় না কারণ অ্যাংুলারও এ জাতীয় অন্তহীন পুনর্নির্দেশগুলির বিরুদ্ধে সুরক্ষা কার্যকর করেছে - এটি কেবল রাউটিং স্তরের প্রতি একক পুনঃনির্দেশ চালায়! এটি আরও সমস্ত পুনঃনির্দেশ বন্ধ করে দেবে (যেমন আপনি নীচের উদাহরণে দেখবেন)।
কি হবে path: '**'
?
path: '**'
এর সাথে বা ছাড়া একেবারে কিছু মিলবে ( af/frewf/321532152/fsa
একটি ম্যাচ)pathMatch: 'full'
।
এছাড়াও, যেহেতু এটি সমস্ত কিছুর সাথে মেলে তাই মূল পাথটিও অন্তর্ভুক্ত থাকে যা { path: '', redirectTo: 'welcome' }
এই সেটআপটিতে সম্পূর্ণ অপ্রয়োজনীয় করে তোলে ।
মজাদারভাবে যথেষ্ট, এই কনফিগারেশনটি রাখা ভাল is
const routes: Routes = [
{
path: '**',
redirectTo: 'welcome'
},
{
path: 'welcome',
component: WelcomeComponent,
},
];
আমরা যদি নেভিগেট /welcome
, path: '**'
একটি ম্যাচ এবং স্বাগত করার জন্য একটি পুনর্নির্দেশ ঘটবে হবে। তাত্ত্বিকভাবে এটি পুনঃনির্দেশগুলির একটি অন্তহীন লুপটি সরিয়ে ফেলতে হবে তবে কৌণিক বন্ধ হয়ে যায় যা তাত্ক্ষণিকভাবে (আমি আগে বর্ণিত সুরক্ষার কারণে) এবং পুরো জিনিসটি ঠিক কাজ করে।