Njia Mbadala za Kusukumia katika NextJS

Katika NextJS unaweza kuunda njia mbadala za kusukumia. Njia kama hizi zinakubali kuwa sehemu ya URL inaweza kuwa na thamani yoyote. Kwa mfano, tuchukue anwani /users/1, ambapo badala ya nambari 1 kunaweza kuwa nambari yoyote, kiufundi inayolingana na id ya mtumiaji ambayo tunataka kuonyesha.

Katika hali hii, hatuhitaji kuunda folda nyingi kwa kila nambari inayowezekana. Inatosha kutangaza sehemu hii ya anwani kuwa mbadala. Katika hali hii, maombi yote ya aina hii yatasimamiwa na faili ya kawaida page.jsx.

Ili kufanya kigezo cha mabadiliko, unahitaji kuchukua jina la folda inayohusika kuweke kwenye mabano mraba. Katika kesi yetu, hii itakuwa muundo wa folda ufuatao:

/app//users//[id]/

Wacha tufanye kipengele kinachohusika:

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

Wakati huo huo, kigezo tulichoweka kitawekwa kwenye kitu maalum params. Wacha tuonyeshe thamani ya kigezo hiki:

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

Задание 1

Tengeneza njia mbadala, inayoshughulikia anwani za aina /city/:name, ambapo badala ya :name kunaweza kuwa mshono wowote.

Задание 2

Tengeneza njia mbadala, inayoshughulikia anwani za aina /show/:country/:city, ambapo badala ya :country na :city kunaweza kuwa mishono yoyote.

Задание 3

Tengeneza njia mbadala, inayoshughulikia anwani za aina /post/:id, ambapo badala ya :id kunaweza kuwa nambari yoyote.

Acha tupewe safu ifuatayo:

page.jsxlet posts = [
  'chapisho1',
  'chapisho2',
  'chapisho3',
  'chapisho4',
  'chapisho5',
];

export default function Post() {
  
}

Fanya ili kulingana na thamani ya kigezo id kwenye muundo wa kipengele kionyeshe chapisho linalofanana.

Задание 4

Tengeneza njia mbadala, inayoshughulikia anwani za aina /prod/:id, ambapo badala ya :id kunaweza kuwa nambari yoyote.

Acha tupewe safu ifuatayo:

page.jsxlet prods = [
  {
    id: 1,
    name: 'bidhaa1',
    cost: 100,
  },
  {
    id: 2,
    name: 'bidhaa2',
    cost: 200,
  },
  {
    id: 3,
    name: 'bidhaa3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Fanya ili kulingana na thamani ya kigezo id kwenye muundo wa kipengele kionyeshe bidhaa inayofanana.