კლიენტის მხარეს მარშრუტიზაცია React Router-ში
ამ გაკვეთილზე განვიხილავთ მნიშვნელოვან კომპონენტს ერთგვერდიანი (SPA) აპლიკაციებისთვის - მარშრუტიზაციას კლიენტის მხარეს. ასეთი მარშრუტიზაცია საშუალებას გვაძლევს განვაახლოთ URL ბრაუზერში დამატებითი მოთხოვნის გარეშე დოკუმენტზე სერვერიდან.
გაუშვით აპლიკაცია, რომელიც ჩვენ შევქმენით
წინა გაკვეთილზე. გახსენით დეველოპერის პანელი და
მასში ჩანართი 'ქსელი' (Network for Chrome).
ჩვენს ბმულებზე ყოველი დაწკაპუნების შემდეგ ჩვენ
ვხედავთ ყოველ ჯერზე მოთხოვნას document-ისთვის. ანუ
ჩვენ ყოველ ჯერზე ვითხოვთ სერვერს ჩატვირთოს ჩვენთვის
document.
მოდით ახლა გამოვიყენოთ React Router-ის უპირატესობები,
რათა თავი დავაღწიოთ ამგვარ მოთხოვნებს. ამისთვის გავხსნათ root.jsx
ჩვენი აპლიკაციის და შევცვალოთ ტეგი a
მარკაპში კომპონენტით Link.
პირველ რიგში დავამატოთ მისი იმპორტი:
import { Outlet, Link } from 'react-router-dom';
ახლა შევცვალოთ ტეგები a ატრიბუტით
href. კოდის ამ ნაწილის ნაცვლად:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
ახლა ჩვენ გვექნება შემდეგი კოდი:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
კვლავ გავხსნათ ჩანართი 'ქსელი'
დეველოპერის პანელზე,
მისამართების ზოლში დავაყენოთ
ძირეული მარშრუტი და განვაახლოთ
გვერდი. ახლა დავაწკაპუნოთ ბმულებს
და ვნახოთ, რომ document ჩვენ მოთხოვნილი იყო
მხოლოდ ერთხელ საწყისი ჩატვირთვისას
და შემდგომ დაწკაპუნებებზე მოთხოვნა
სერვერზე აღარ არის.
აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით დავალებებში წინა გაკვეთილებისთვის. გაკვეთილის მასალების გამოყენებით, რეალიზება გაუწიეთ მასში მარშრუტიზაციას კლიენტის მხარეს, გადააკეთეთ თქვენი ბმულები, როგორც აღწერილია გაკვეთილზე.
