Stránka produktu v prohlížeči v Redux

V minulé lekci jsme vytvořili samostatnou stránku pro produkt. Nyní musíme zajistit, aby se po kliknutí na tlačítko naše stránka objevila v prohlížeči.

Nejprve jí přiřadíme adresu, na které se bude zobrazovat. Otevřeme soubor App.jsx, ve kterém definujeme trasy, a přidáme do children další podřízenou trasu (nezapomeňte importovat ProductPage.jsx). Nastavíme cestu a komponentu, kterou budeme zobrazovat:

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

Nyní otevřeme ProductsList.jsx v složce products a mírně upravíme kód pro dispProducts. Nyní máme samostatnou stránku s úplnými informacemi o každém produktu. To znamená, že v seznamu produktů budeme zobrazovat pouze název produktu a zkrácený text popisu. Také přidáme odkaz ve formě navigačního prvku Link z knihovny routeru, po jehož kliknutí se lze dostat na stránku produktu. Přidejme také divu třídu product-excerpt, aby byly produkty oddělené. Nyní bude náš kód pro dispProducts vypadat takto:

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>
))

Importujeme Link:

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

A přidáme styly pro třídy link-btn a product-excerpt do 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;
}

Na závěr uděláme také funkční odkaz v levém menu, vedoucí na stránku se seznamem produktů, abychom se do něj mohli dostat z jakéhokoli jiného místa. K tomu otevřeme náš root.jsx a nahradíme tento řádek kódu:

<a>Products</a>

Následujícím:

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

Také nezapomeneme importovat NavLink z knihovny pro React router:

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

Spustíme naši aplikaci. Nyní můžeme přejít na stránku s informacemi o jakémkoli produktu kliknutím na tlačítko pro zobrazení. Zkuste nyní přidat nový produkt a podívejte se na jeho informace na samostatné stránce kliknutím na tlačítko pro zobrazení. Také nyní, pro návrat k seznamu produktů, stačí kliknout na 'Products' v menu vlevo. Když jste na různých stránkách, podívejte se, jak se mění URL v adresním řádku prohlížeče.

Otevřete svou aplikaci se studenty. V souboru App.jsx vytvořte další podřízenou trasu pro stránku studenta.

V souboru StudentsList.jsx proveďte v kódu změny pro dispStudents, jak je ukázáno v lekci.

Zařiďte, aby odkaz 'Students' v levém menu vedl na stránku se seznamem studentů. Ověřte, že vše funguje.

Podívejte se, jak se bude měnit hodnota v adresním řádku prohlížeče v závislosti na tom, na které stránce se právě nacházíte.