Strona produktu w przeglądarce w Redux

Na poprzednich zajęciach zrobiliśmy osobną stronę dla produktu. Teraz musimy sprawić, aby po naciśnięciu jakiegoś przycisku nasza strona pojawiła się w przeglądarce.

Na początek przypiszmy jej adres, pod którym będzie wyświetlana. Otwórzmy plik App.jsx, w którym definiujemy trasy, i dodajmy w children jeszcze jedną trasę potomną (nie zapomnij zaimportować ProductPage.jsx). Wskażmy ścieżkę i komponent, który będziemy wyświetlać:

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

Teraz otwórzmy ProductsList.jsx w folderze products i nieco zmieńmy kod dla dispProducts. Teraz mamy osobną stronę z pełną informacją o każdym produkcie. Oznacza to, że w liście produktów będziemy wyświetlać tylko nazwę produktu i skrócony tekst opisu. Dodamy również link w postaci elementu nawigacji Link z biblioteki routera, po naciśnięciu którego można będzie przejść na stronę produktu. Dodajmy również divowi klasę product-excerpt, aby oddzielić produkty. Teraz nasz kod dla dispProducts będzie taki:

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

Zaimportujmy Link:

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

I dodajmy stylów dla klas link-btn i product-excerpt w 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 koniec, zróbmy również działającym link w menu po lewej stronie, prowadzący na stronę z listą produktów, abyśmy mogli się do niego dostać z dowolnego innego miejsca. Aby to zrobić, otwórzmy nasz root.jsx i zamieńmy ten wiersz kodu:

<a>Products</a>

Na następujący:

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

Nie zapomnijmy też zaimportować NavLink z biblioteki dla React routera:

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

Uruchommy naszą aplikację. Teraz możemy przejść na stronę informacji o dowolnym produkcie, naciskając przycisk podglądu. Spróbuj teraz dodać nowy produkt i zobacz informacje o nim na osobnej stronie naciskając przycisk podglądu. Również teraz, aby wrócić do listy produktów wystarczy kliknąć na 'Products' w menu po lewej stronie. Znajdując się na różnych stronach, popatrz jak zmienia się URL w pasku adresu przeglądarki.

Otwórz swoją aplikację ze studentami. W pliku App.jsx utwórz jeszcze jedną trasę potomną dla strony studenta.

W pliku StudentsList.jsx wprowadź w kodzie zmiany dla dispStudents, jak pokazano na lekcji.

Spraw, aby link 'Students' w lewym menu prowadził na stronę z listą studentów. Sprawdź, czy wszystko działa.

Zobacz jak będzie zmieniać się wartość w pasku adresu przeglądarki, w zależności od tego na której stronie się teraz znajdujesz.