Хатои параметри нодуруст дар 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>;
}

Ошкорост, ки ID дар URL метавонад ҳар гуна набошад, балки танҳо яке аз калидҳои объекти мо бошад. Кӯшиши муроҷиат кардан ба суроғаи мавҷуднабуда /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();
  }
}