Njia Zilizopachikwa katika React Router

Katika somo hili tutafahamiana na njia zilizopachikwa. Zindua programu tuliyofanya katika somo lilopita. Ukibonyeza viungo, tunaingia kwenye ukurasa tofauti wa bidhaa. Tukichukulia kuwa hali hii haikufai, na tungependa orodha ya bidhaa na ukurasa wa bidhaa zionekane kando, kwenye skrini moja kwa uwazi zaidi. Hebu tufanye hivyo.

Ili kufanya hivyo, hebu tufungue faili main.jsx na tufanye njia yetu ya ukurasa wa bidhaa kuwa njia mtoto wa njia ya mzizi au, kwa maneno mengine "tuipachishe" ndani ya njia ya mzizi. Ili kufanya hivyo tutumia sifa nyingine ya kitu cha njia children:

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

]);

Tunabonyeza tena viungo, lakini upande wa kulia wa orodha ya bidhaa hatuoni chochote. Hii ni kwa sababu hatukumwambia njia ya mzizi wapi tunataka kuonyesha njia zake za watoto.

Hasa kwa ajili ya kuonyesha vipengele vya njia za watoto kwenye kitu kizazi, komponeneti Outlet itatusaidia. Hebu tuitegeme katika maktaba kwenye faili ya njia ya mzizi:

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

Kisha tuifunge kwenye div #product na tuiongeze kwenye muundo wa njia ya mzizi mwishoni mwa usanidi baada ya kitenzi cha kufunga nav, na muundo mzima ufungwe kwenye div nyingine #main:

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

Tukibonyeza viungo, sasa tunaona orodha ya bidhaa na ukurasa wa bidhaa.

Tuongeze mitindo kidogo kwenye index.css:

h1, h2 {
	margin: 0;
}

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

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

Chukua programu uliyoiumba katika kazi ya somo lilopita. Kwa kutumia nyenzo za somo, fanya njia ya ukurasa wa mwanafunzi iwe imepachikwa ndani ya mzizi.

Sasa fanya ili wakati unapobonyeza viungo skrini ionyeshe orodha ya wanafunzi na ukurasa wa mwanafunzi.