Vēl vienas maršruta pievienošana React Router

Mums ir saknes maršruts, kas ved uz galveno lapu, kurā mums ir produktu saites. Tagad pievienosim vēl vienu maršrutu, lai , noklikšķinot uz vienas no saitēm, mums tiktu parādīta produkta lapa, nevis kļūdas ekrāns.

Vispirms atveram mūsu lietotni, ko mēs izveidojām iepriekšējās nodarbībās un izveidosim mapē routes failu product.jsx. Izveidosim tajā komponentu Product:

function Product() {}

export default Product;

Tagad izveidosim iekš Product objektu product, ar īpašībām name, cost un amount, pagaidām tās būs dažas fiksētas vērtības:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Un produkta lapā mēs attēlosim, attiecīgi, tā nosaukumu, izmaksas un daudzumu:

return (
	<div>
		<h2>Product page</h2>
		<p>Name: {product.name}</p>
		<p>Cost: {product.cost}</p>
		<p>Amount: {product.amount}</p>
	</div>
);

Noteikti pievienosim komponenta Product importu failā main.jsx:

import Product from './routes/product';

Un, beidzot, pievienosim vēl vienu maršrutu mūsu lietotnē, izdarīsim to uzreiz pēc saknes maršruta. Kā ceļu norādīsim 'products/:productId', un kā elementu attēlošanai mums darbojas komponents Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Tagad palaidām lietotni, noklikšķinām uz saitēm un nonākam uz produkta lapu (pagaidām tā mums ir vienāda visām saitēm), nevis ar kļūdu.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, līdzīgi izveidojiet failu student.jsx, lai studenta lapā tiktu parādīts viņa vārds, uzvārds, iestāšanās gads un specialitāte. Pievienojiet jaunu maršrutu studenta lapai failā main.jsx, iestatiet path vērtību uz 'students/:studentId'. Pārliecinieties, ka noklikšķinot uz saitēm jūs nonākat tagad uz studenta lapu.