Dinamiskie maršruti ir lapas, kas ļauj URL izmantot pielāgotus parametrus. Tie ir īpaši noderīgi, veidojot lapas dinamiskam saturam.
Emuāram varat izmantot dinamisku maršrutu, lai izveidotu vietrāžus URL, pamatojoties uz emuāra ziņu nosaukumiem. Šī pieeja ir labāka nekā lapas komponenta izveide katrai ziņai.
Varat izveidot dinamiskus maršrutus programmā Next.js, definējot divas funkcijas: getStaticProps un getStaticPaths.
Dinamiskā maršruta izveide programmā Next.js
Lai vietnē Next.js izveidotu dinamisku maršrutu, pievienojiet lapai iekavas. Piemēram, [params].js, [slug].js vai [id].js.
Emuāram dinamiskajam maršrutam varat izmantot sliņķi. Tātad, ja amatam būtu lode dynamic-routes-nextjs, iegūtais URL būtu https://example.com/dynamic-routes-nextjs.
Mapē lapas izveidojiet jaunu failu ar nosaukumu [slug].js un izveidojiet Post komponentu, kas izmanto ziņas datus kā rekvizītu.
konst Ziņa = ({ postData }) => {
atgriezties <div>{/* saturs */}</div>;
};
Ir dažādi veidi, kā nosūtīt ziņas datus ziņai. Izvēlētā metode ir atkarīga no tā, kā vēlaties renderēt lapu. Lai izgūtu datus izveides laikā, izmantojiet getStaticProps() un, lai tos iegūtu pēc pieprasījuma, izmantojiet getServerSideProps().
GetStaticProps izmantošana, lai izgūtu ziņas datus
Emuāra ziņas nemainās tik bieži, un pietiek ar to iegūšanu izveides laikā. Tātad, modificējiet Post komponentu, lai iekļautu getStaticProps ().
imports { getSinglePost } no "../../utils/posts";konst Ziņa = ({ saturs }) => {
atgriezties <div>{/* saturs */}</div>;
};
eksportētkonst getStaticProps = asinhrons ({ parametri }) => {
konst ziņa = gaidīt getSinglePost (params.slug);
atgriezties {
rekvizīti: { ...post },
};
};
Funkcija getStaticProps ģenerē lapā atveidotos ziņu datus. Tas izmanto sliedes no ceļiem, ko ģenerē funkcija getStaticPaths.
GetStaticPaths izmantošana ceļu ienešanai
Funkcija getStaticPaths() atgriež ceļus lapām, kurām jābūt iepriekš atveidotām. Mainiet Post komponentu, lai to iekļautu:
eksportētkonst getStaticPaths = asinhrons () => {
konst ceļi = getAllPosts().map(({ slug }) => ({ parametri: { slug } }));
atgriezties {
ceļi,
atkāpties: viltus,
};
};
Šī getStaticPaths ieviešana ienes visas ziņas, kas būtu jāatveido, un atgriež slides kā parametrus.
Kopumā fails [slug].js izskatīsies šādi:
imports { getAllPosts, getSinglePost } no "../../utils/posts";konst Ziņa = ({ saturs }) => {
atgriezties <div>{saturs}</div>;
};eksportētkonst getStaticPaths = asinhrons () => {
konst ceļi = getAllPosts().map(({ slug }) => ({ parametri: { slug } }));
atgriezties {
ceļi,
atkāpties: viltus,
};
};eksportētkonst getStaticProps = asinhrons ({ parametri }) => {
konst ziņa = gaidīt getSinglePost (params.slug);atgriezties {
rekvizīti: { ...post },
};
};
eksportētnoklusējuma Pasts;
Lai izveidotu dinamisku maršrutu, ir jāizmanto getStaticProps() un getStaticPaths() kopā. Funkcijai getStaticPaths() ir jāģenerē dinamiskie maršruti, savukārt getStaticProps() ienes katrā maršrutā renderētos datus.
Ligzdoto dinamisko maršrutu izveide vietnē Next.js
Lai programmā Next.js izveidotu ligzdotu maršrutu, mapē lapas ir jāizveido jauna mape un tajā jāsaglabā dinamiskais maršruts.
Piemēram, lai izveidotu /pages/posts/dynamic-routes-nextjs, saglabājiet [slug].js /pages/posts.
Piekļuve URL parametriem no dinamiskajiem maršrutiem
Pēc maršruta izveides varat izgūt URL parametrs no dinamiskā maršruta, izmantojot useRouter() Reakcijas āķis.
Lapām/[slug].js iegūstiet slug šādi:
imports { useRouter } no 'next/router'konst Ziņa = () => {
konst maršrutētājs = useRouter()
konst { slug } = router.query
atgriezties <lpp>Ziņa: {slug}</lpp>
}
eksportētnoklusējuma Post
Tiks parādīta ziņas lode.
Dinamiskā maršrutēšana ar getServerSideProps
Izmantojot Next.js, varat iegūt datus izveides laikā un izveidot dinamiskus maršrutus. Varat izmantot šīs zināšanas, lai iepriekš renderētu lapas no vienumu saraksta.
Ja vēlaties iegūt datus par katru pieprasījumu, izmantojiet getServerSideProps, nevis getStaticProps. Ņemiet vērā, ka šī pieeja ir lēnāka; to vajadzētu izmantot tikai tad, ja patērējat regulāri mainīgus datus.
