Byvoeging van nog 'n roete in React Router

Ons het 'n wortelroete wat na die hoofblad lei, waar ons skakels vir produkte het. Laat ons nou nog 'n roete byvoeg sodat wanneer ons op een van die skakels klik, die produkblad vertoon word, en nie 'n foutskerm nie.

Om mee te begin, laat ons ons toepassing oopmaak, wat ons in vorige lesse gemaak het, en in die gids routes die lêer product.jsx skep. Laat ons daarin die komponent Product maak:

function Product() {}

export default Product;

Laat ons nou binne Product 'n voorwerp product skep, met eienskappe name, cost en amount, vir nou sal dit 'n paar vasgestelde waardes wees:

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

export default Product;

En op die produkblad sal ons onderskeidelik sy naam, koste en hoeveelheid vertoon:

return (
	<div>
		<h2>Produkblad</h2>
		<p>Naam: {product.name}</p>
		<p>Koste: {product.cost}</p>
		<p>Hoeveelheid: {product.amount}</p>
	</div>
);

Voeg asseblief die invoer van die komponent Product by in die lêer main.jsx:

import Product from './routes/product';

En uiteindelik, voeg ons nog 'n roete by in ons toepassing, laat ons dit dadelik na die wortelroete doen. As pad specifiseer ons 'products/:productId', en as element vir vertoning gebruik ons die komponent Product:

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

En nou begin ons die toepassing, klik op die skakels en beland op die produkblad (vir nou is dit dieselfde vir alle skakels), en nie op 'n foutblad nie.

Neem die toepassing wat u in opdragte vir vorige lesse geskep het. Deur die lesmateriaal te gebruik, skep op soortgelyke wyse die lêer student.jsx, laat op die studentblad sy naam, van, instromingsjaar en spesialisasie vertoon word. Voeg 'n nuwe roete vir die studentblad by in die lêer main.jsx, stel die waarde van path in na 'students/:studentId'. Maak seker dat u wanneer u op die skakels klik, u nou op die studentblad beland.