React Router-ро як роҳи дигар илова кардан

Мо роҳи реша дорем, ки ба саҳифаи асосӣ меравад, ки дар он истинодҳо барои маҳсулотҳо дорем. Биёед акнун як роҳи дигар илова кунем, то вақте ки ба як аз истинодҳо клик мекунем, саҳифаи маҳсулот ба мо намоиш дода шавад, ва на экрани хато.

Барои оғоз, биёед барномаи худро, ки дар дарсҳои гузашта сохта будем, кушода ва дар ҷузвдон routes файли product.jsx эҷод кунем. Дар он компоненти Product-ро созем:

function Product() {}

export default Product;

Акнун дар дохили Product объекти product-ро эҷод кунем, бо хосиятҳои name, cost ва amount, то ин дам ин баъзе арзишҳои собит хоҳанд буд:

function Product() {
	const product = {
		name: 'Маҳсулот',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Ва дар саҳифаи маҳсулот мо мувофиқан номи он, нарх ва миқдори онро барорасонем:

return (
	<div>
		<h2>Саҳифаи маҳсулот</h2>
		<p>Ном: {product.name}</p>
		<p>Нарх: {product.cost}</p>
		<p>Миқдор: {product.amount}</p>
	</div>
);

Ҳатман компоненти Product-ро ба файли main.jsx ворид кунем:

import Product from './routes/product';

Ва ниҳоят, ба барномаи мо як роҳи дигар илова кунем, инро фавран баъд аз роҳи реша созем. Ҳамчун масир 'products/:productId'-ро муайян кунем, ва ҳамчун унсури барои намоиш компоненти Product ба кор меравад:

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

Ва акнун барномаро оғоз мекунем, ба истинодҳо клик карда ва ба саҳифаи маҳсулот мерасем (то ин дам барои ҳамаи истинодҳо якхела аст), ва на ба саҳифаи хато.

Барномаеро, ки шумо дар вазифаҳои дарсҳои гузашта сохтаед, гиред. Бо истифода аз маводи дарс, ба монанди ин файли student.jsx-ро эҷод кунед, бигзор дар саҳифаи донишҷӯ номи ӯ, насаби ӯ, соли дохилшавӣ ва ихтисоси ӯ барорад. Ба файли main.jsx барои саҳифаи донишҷӯ як роҳи нав илова кунед, арзиши path-ро ба 'students/:studentId' муқаррар кунед. Боварӣ ҳосил кунед, ки акнун вақте ки ба истинодҳо клик мекунед, ба саҳифаи донишҷӯ мерасед.