React Router-daky içindäki marshrutlar

Bu sapakda biz içindäki marshrutlar bilen tanşarys. Öňki sapakda ýasap geçen aplikasiýamyzy işlediň. Baglanyşyklara basyp, önüm barada aýratyn sahypa geçýäris. Diýeliň, beýle bolmagy ýaramaz we önümleriň sanawy bilen önüm sahypasynyň bir ekranda, ýanýana görünmegini isleýäris. Geliň, muny şeýle edeliň.

Bunun üçin geliň main.jsx faýlyny açalyň we ýönekeýlikde önüm sahypasy üçin marshrutumyzy esasy marshrutyň çaga marshruty edeliň ýa-da beýle aýdanyňda, ony "esasy marshrutyň içine" goýalyň. Bunun üçin marshrut obýektiniň ýene bir häsiýeti children-dan peýdalanyň:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Baglanyşyklara ýene-de basýarys, emma önümleriň sanawynyň sag tarapynda hiç zat görmýäris. Sebäbi, biz esasy marsruta, onuň çaga marsrutlaryny nirede görkezmek isleýändigimizi aýtmandyk.

Esas marsrutda çaga marsrutlarynyň elementlerini görkezmek üçin Outlet komponenti kömek eder. Geliň ony kitaphanadan esasy marsrut üçin faýla import edeliň:

import { Outlet } from 'react-router-dom';

Soňra ony #product div-ine guralyk edeliň we esasy marsrut üçin maketiň ahyrynda, nav teginiň ýapyjy teginden soň goşalyň, we tutuş gurluşy ýene bir #main div-i bilen guralyk edeliň:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Indi baglanyşyklara basanyňyzda, biz önümleriň sanawyny hem, önüm sahypasyny hem görýäris.

Geliň, index.css faýlymyza azajyk stil goşalyň:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

Öňki sapakdaky tabşyryk üçin ýasalan aplikasiýaňyzy alyň. Sapak materiallaryny ulanmak bilen, talyp sahypasy üçin marshruty esasy marsrutyň içine goýuň.

Indi bolsa, baglanyşyklara basylanynda ekranda talyplaryň sanawy hem, talyp sahypasy hem görkezilsin.