NextJS-те жарамсыз параметр қатесі

Алдыңғы сабақтарда біз 404 қатесін бердік, сол жағдайда, қайда URL үшін маршрут табылмады. Алайда, динамикалық маршрут жағдайында маршрут бар болуы мүмкін, бірақ параметр мәні дұрыс емес.

Мысалға қарайық. Бізде келесі түрдегі маршрут бар делік: /user/:id.

Бізде сондай-ақ пайдаланушылар объектісі бар делік:

app/user/[id]/page.jsxlet users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

Біз пайдаланушыны оның id бойынша көрсеткіміз келеді делік:

app/user/[id]/page.jsxexport default function User({ params }) {
  return <p>
    { users[params.id] }
  </p>;
}

Әлбетте, URL-дегі id кез келген болуы мүмкін емес, тек біздің объектіміздің кілттерінің бірі болуы керек. Жоқ адреске сілтеме жасау /user/6 әкелуі керек қате шығарылады. Келіңіз, біздің компонент кодын түзелік және қате мәтінін шығарайық:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return <p>
      пайдаланушы табылмады
    </p>;
  }
}

Бірақ, бұл жеткіліксіз. Өйткені бұл жағдайда біз жоқ бетке сілтеме жасаймыз, ал бұл HTTP статусы 404 беру керек екенін білдіреді. Бұл орындалады арнайы функция notFound, NextJS-ке кірістірілген.

Келіңіз, бұл функцияны импорттайық:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

Енді оны параметр мәні дұрыс емес болған жағдайда шақырамыз:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}

Біздің компоненттің толық коды келесідей болады:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

let users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

export default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}