یکی از چالش‌هایی که کتابخانه‌ها و فریم‌ورک‌های جاوااسکریپت سعی در حل آن دارند، مسئله ی Routing است. ما سعی داریم در این سوال، یک برنامه را به همراه Routeهای مرتبط به هر لینک پیاده‌سازی کنیم.

ظاهر کلی برنامه به این صورت است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

ساختار فایل‌های این پروژه به صورت زیر است:

Routing-question
├── images
│   └── quera-logo.svg
├── main.js
├── index.html
└── styles.css

راه‌اندازی پروژه

برای اجرای این پروژه از اکستنشن live server در vs code استفاده کنید.

جزئیات

در فایل index.html چند تگ a را مشاهده می‌کنیم که با کلاس navlink مشخص شده‌اند. یکی از این تگ‌ها logo است و سه تای بعدی بوت‌کمپ ، کالج و جونیورا هستند. این برنامه باید طوری پیاده‌سازی شود که با کلیک شدن بر روی این تگ‌ها:

• خانه (لوگو کوئرا) : /
• بوت‌کمپ: /bootcamp
• کالج: /college
• جونیورا: /juniora

به Routeهایی که مشاهده کردید هدایت شود.

در هر Route، محتوای خواسته شده مربوط به همان Route، باید در یک تگ <h1> نمایش داده شود.

لینک	Route	محتوا
خانه(لوگو)	/	به کوئرا خوش آمدید
بوت کمپ	bootcamp/	به بوت کمپ خوش آمدید
کالج	college/	به کالج خوش آمدید
جونیورا	juniora/	به جونیورا خوش آمدید

همانطور که گفته شد هر محتوا بر اساس Route آن در یک تگ <h1> نمایش داده شود.

توجه کنید که:

• قابلیت رفتن به صفحه‌ی قبل و بعد در مرورگر باید وجود داشته باشد.
• دکمه‌های a .navlink نباید صفحه را refresh کنند.

نکات

• شما تنها مجاز به اعمال تغییرات در فایل main.js هستید.
• فایل ارسالی شما هم باید main.js باشد.