Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох цэс бусдаасаа ялгагдахгүй байгаа нь сайнгүй. 
Үнэхээр / чиглүүлэгч нүүр хуудас буюу http://localhost:3000/ хаягаар нүүр хуудасыг үзүүлж байхад

кодийн a тегээр тодорхойлогдсон Нүүр холбоост ямар нэгэн атрибут байхгүй байгаа нь харагдана. 

Тэгвэл react-router-dom сангаас NavLink компонентийг импортлоод

          <ul>
            <li>
              <NavLink to="/">Нүүр</NavLink>
            </li>
            <li>
              <NavLink to="/about">About</NavLink>
            </li>
            <li>
              <NavLink to="/cars">Cars</NavLink>
            </li>
          </ul>

цэсний тодорхойлолтын Link -ийг NavLink -ээр соливол

NavLink компонент сонгогдсон цэст active классийг динамикаар нэмнэ. Одоо active классаар сонгогдсон цэсийг хэвжүүлэх боломжтой болсон тул Layout компонентийн хэвжүүлэлтийн Layout.scss файлд 

.nav {
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 20px;

    li {
      margin-right: 15px;

      a.active {
        font-weight: bold;
        color: red;
      }
    }
  }
}

active классийг тодорхойлон өгвөл сонгогдсон цэсний

фонт томрон улаан өнгөөр харагдана. NavLink компонент цэст нэмсэн active классаас өөр классийг идэвхитэй цэст нэмэх хэрэгтэй бол яах вэ? Layout.scss файлд тодорхойлсон a.active классийн нэрийг a.active-link болгон өөрчилбөл NavLink компонент цэст active классийг нэмэх ч active-link классийг олж харахгүй. active-link классийг цэсний тодорхойлолтод className атрибутаар

        <nav className="nav">
          <ul>
            <li>
              <NavLink to="/" className={({ isActive }) => (isActive ? "active-link" : "")}>
                Нүүр
              </NavLink>
            </li>
            <li>
              <NavLink to="/about" className={({ isActive }) => (isActive ? "active-link" : "")}>
                About
              </NavLink>
            </li>
            <li>
              <NavLink to="/cars" className={({ isActive }) => (isActive ? "active-link" : "")}>
                Cars
              </NavLink>
            </li>
          </ul>
        </nav>

оруулан ирнэ. className атрибут мөрөөс гадна функцийг авч болох бөгөөд функцэд автоматаар дамжуулдаг обьектоос холбоос идэвхитэй эсэхийг заадаг isActive түлхүүртэй талбар байдагийг бүтцийн задаргаагаар аван параметрээр дамжуулсан. Эргэн дуудалтын функцэд ирэх isActive талбарын утгаас хамааран холбоост active-link классийг нэмсэн. Өөрчлөлтийг хадгалаад хуудасны ажиллагааг шалгавал идэвхитэй цэсийг active-link классаар хэвжүүлнэ. Шалгаад үзээрэй. Кодод давталт гарч байгаа тул эргэн дуудалтын функцийг тусдаа setActive тогтмолд 

  render() {
    const setActive = ({ isActive }) => (isActive ? "active-link" : "");
    return (
      <div>
        <nav className="nav">
          <ul>
            <li>
              <NavLink to="/" className={setActive}>
                Нүүр
              </NavLink>
            </li>
            <li>
              <NavLink to="/about" className={setActive}>
                About
              </NavLink>
            </li>
            <li>
              <NavLink to="/cars" className={setActive}>
                Cars
              </NavLink>
            </li>
          </ul>
        </nav>
    ...

олгоод className атрибутуд setActive -ийг заан өгье. Олон ашиглагдах хэсгийг тусд нь гаргах энэ аргачлалыг тогтмол ашиглахыг зөвлөе. Өөрчлөлтийг хадгалаад хуудасны ажиллагааг шалгавал бүгд хэвийн ажиллана. Холбоост хэвжүүлэлтийн параметрийг style атрибутаар дамжуулан 

  render() {
    ...
    const setStyle = ({ isActive }) => ({color: isActive ? "green" : "black", });
    return (
      <div>
        <nav className="nav">
          <ul>
            <li>
              <NavLink to="/" style={setStyle}>
                Нүүр
              </NavLink>
            </li>
            <li>
              <NavLink to="/about" style={setStyle}>
                About
              </NavLink>
            </li>
            <li>
              <NavLink to="/cars" style={setStyle}>
                Cars
              </NavLink>
            </li>
          </ul>
        </nav>
    ...

хийсэн ч болдог. Өөрчлөлтийн дараа сонгодсон цэс ногоон өнгөтэй болон харагдана. 
Үүний зэрэгцээ NavLink компонентийн to параметрт тохиргоо хийж болно. Жишээ нь машинуудын жагсаалтыг үзүүлэх цэсний тодорхойлолтын 

...
            <li>
              <NavLink
                to={{ pathname: "/cars", search: "?a=1&b=2", hash: "hash" }}
                style={setStyle}
              >
                Cars
              </NavLink>
            </li>
...

to параметрт мөр биш обьектийг дамжуулъя. Обьектийн pathname талбарт чиглүүлэгчийн замыг, search талбарт замын араас get параметрээр нэмэгдэх мөрийг, hash талбарт ямар нэгэн хэш тэгийг өгсөн. Өөрчлөлтийг хадгалаад хуудсаа нээгээд cars цэсээр орвол

хаягийн мөр to параметрт дамжуулсан обьектын талбаруудыг агуулна.