Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас хооронд динамик буюу дахин ачаалахгүйгээр шилжилт хийх боломжийг бүрдүүлсэн. App компонентийн кодод бүртгүүлсэн

function App() {
  return (
    <div>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">Нүүр</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <hr />
      <Routes>
        <Route path="/" element={<Cars />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

/ чиглүүлэгч манай нүүр хуудас буюу http://localhost:3000/ хаягийг зааж байгаа ч Cars компонентод шилжиж байгаа нь логикийн талаасаа ойлгомж муутай болсон. Иймээс кодийг / чиглүүлэгчээр нүүр хуудаст шилждэг болгоё.

RxJs сангийн хүрээнд стримтэй ажиллах ажиллагааг улам хөнгөн болгодог тусгай хэрэгслүүдийн талаар энэ хичээлээр авч үзнэ. Хичээлийн материалийг бүрэн гүйцэд ойлгохын тулд өмнөх хичээлүүдийг үзсэн байх шаардлагатайг сануулъя.

defaultIfEmpty арга

of аргаар

Rx.Observable.of(1)
    .subscribe(createSubscribe('of'));

стрим үүсгээд түүнд бүртгүүлсэн кодыг бичээд хөтөч дээр хуудсаа нээгээд консолын цонхыг харвал

дээрх үр дүнг өгөх нь ойлгомжтой. of аргад юу ч дамжуулахгүй бол код хэрхэн ажиллахыг харцгаая.

Таны програм хөгжихийн хирээр компонентуудын тоо нэмэгдэнэ. Хэрвээ компонент бүр өөрийн хэвжүүлэлтийг css өргөтгөлтэй тусдаа файлуудад хадгалан ашиглаж байвал зарим хэвүүдийн нэр давхцан хэвүүд өөрчлөгдөх магадлал бий. Учир нь css өргөтгөлтэй файлууд бусад компонентуудад нээлттэй байдаг. Үүнийг шалгах зорилгоор Car компонентийн Car.css файлд

.btn {
  color: yellowgreen;
}

хэвийг нэмэн тодорхойлоод хэвийн классийг App компонентийн Toogle car товчинд

        <button className='btn' onClick={this.toogleCarsHandler}>Toogle car</button>

тавин өгөөд хуудсаа нээвэл

Хичээлээр компонентод ирж буй параметрүүд зөв эсэх, ийм шалгалтыг хийх ямар ач холбогдолтой талаар үзье. Компонентод параметр дамжуулах хичээлд App компонентоос carName, carYear талбаруудыг Car компонентод параметрээр дамжуулан авч үзүүлсэн. Тэгвэл Car компонент ирсэн параметрүүд дээр ямар нэгэн нэмэлт үйлдлийг жишээ нь машины нэрийг тонгоруулан

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
  </div>
</template>

<script>
  export default {
    props: ['carName', 'carYear'],
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

харуулдаг гэж үзье.