Produkto puslapis naršyklėje su Redux

Ankstesnėje pamokoje mes sukūrėme atskirą puslapį produktui. Dabar mums reikia padaryti taip, kad paspaudus ant bet kurio mygtuko, mūsų puslapis atsirastų naršyklėje.

Pirmiausia priskirkime jai adresą, kuriuo ji bus rodoma. Atidarykime failą App.jsx, kuriame mes aprašome maršrutus, ir pridėkime į children dar vieną antrinį maršrutą (nepamirškite importuoti ProductPage.jsx). Nurodykime kelią ir komponentą, kurį busime atvaizduoti:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

Dabar atidarykime ProductsList.jsx aplanke products ir šiek tiek pakeiskime kodą dispProducts. Dabar mes turime atskirą puslapį su pilna informacija apie kiekvieną produktą. Tai reiškia, kad produktų sąraše mes atvaizduosime tik produkto pavadinimą ir sutrumpintą aprašymo tekstą. Taip pat mes pridėsime nuorodą navigacijos elemento pavidalu Link iš maršrutizavimo bibliotekos, paspaudus kurią bus galima patekti į produkto puslapį. Pridėkime taip pat div'ui klasę product-excerpt, kad atskirtume produktus. Dabar mūsų kodas dispProducts atrodys taip:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Importuokime Link:

import { Link } from 'react-router-dom'

Ir pridėkime stilių klasėms link-btn ir product-excerpt į index.css:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

Galiausiai, padarykime taip pat veikiančia nuorodą kairėje esančiame meniu, vedančią į puslapį su produktų sąrašu, kad galėtume patekti į jį iš bet kurios kitos vietos. Tam atidarykime mūsų root.jsx ir pakeiskime šią kodo eilutę:

<a>Products</a>

Šia:

<NavLink to="/products" end>
	Products
</NavLink>

Taip pat nepamirškime importuoti NavLink iš React maršrutizavimo bibliotekos:

import { Outlet, NavLink } from 'react-router-dom'

Paleiskime mūsų programą. Dabar mes galime patekti į bet kurio produkto informacijos puslapį, paspaudę peržiūros mygtuką. Pabandykite dabar pridėti naują produktą ir pažiūrėkite informaciją apie jį atskirame puslapyje paspaudę peržiūros mygtuką. Taip pat dabar, norint grįžti prie produktų sąrašo, pakanka paspausti ant 'Products' kairėje esančiame meniu. Būdami skirtinguose puslapiuose, pažiūrėkite kaip keičiasi URL adreso juostoje naršyklėje.

Atidarykite savo studentų programą. Faile App.jsx sukurkite dar vieną antrinį maršrutą studento puslapiui.

Faile StudentsList.jsx atlikite kode pakeitimus dispStudents, kaip parodyta pamokoje.

Padarykite taip, kad nuoroda 'Students' kairiajame meniu vestų į puslapį su studentų sąrašu. Patikrinkite, ar viskas veikia.

Pažiūrėkite, kaip keisis reikšmė naršyklės adreso juostoje, priklausomai nuo to, kuriame puslapyje esate.