Usakinishaji wa React Router katika Programu ya Redux

Katika masomo yaliyopita tuliweka ala za kimsingi za kufanya kazi na Redux. Mara nyingi hufanyika hivi, kwamba programu inahitaji kiongozi wa njia za usafiri kwa ajili ya kutembelea kurasa zake za wavuti na programu yetu haitakuwa tofauti. Kwa hili tutaweka maktaba ya React Router.

Wacha tufungue mradi wetu na tuandike kwenye terminali amri ifuatayo:

npm install react-router-dom

Kukisia kidogo mbele, nitasema, kwamba programu yetu ya Redux kwa jadi imejikita kwenye bidhaa, ambazo habari zake zinachapishwa na wauzaji fulani. Kwa hivyo sasa tutabadilisha kidogo kipengele kuu App, na pia tuongeze kwenye programu utendakazi wa kutekeleza uongozi wa njia.

Kuanza, wacha tuingie kwenye folda src, kisha uingie app na uunde faili hapa root.jsx. Hii itakuwa mzizi wa tovuti yetu: upande wa kushoto tutakuwa na orodha ya menyu, na upande wa kulia - yaliyomo (kwa sasa tu tuna kichwa tu hapa):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Bidhaa</a>
					<a>Wauzaji</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Hii ni programu yangu ya kwanza ya Redux!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Na kipengele App tutakibadilisha. Kuanza kabisa tutaondoa yaliyomo yake. Kisha tutaingiza vitendaji viwili kwa ajili ya kiongozi wa njia na kipengele chetu cha mzizi Root:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Chini baada ya kuingiza tutaunda kiongozi wa njia, na kuandika njia ya kwanza, tukimpa Root wetu kama kipengele kinachoonyeshwa na, ipasavyo, tukiweka njia kuwa '/'. Baadaye kwenye App tutaongeza pia njia nyingine muhimu:

const router = createBrowserRouter([{ path: '/', element: <Root /> }])

Chini tuandike msimbo wa kitendo App:

function App() {
	return <RouterProvider router={router} />
}

export default App

Yote. Tuanzishe. Katika sehemu inayofuata tutakuwa tunatekeleza vipengele kwa ajili ya kufanya kazi kwa programu ya Redux.

Mwishowe tuongeze urembo kidogo, tukiandika kwa ajili hiyo mitindo kwenye index.css:

body {
	font-size: 24px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

ul {
	list-style: none;
	padding: 0;
}

h1, h2, h3 {
	margin: 0;
}

a {
	text-decoration: none;
	color: blue;
	cursor: pointer;
}

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

#menu {
	margin-right: 50px;
	padding-top: 50px;
	padding-right: 50px;
	border-right: 2px solid lightgray;
	font-weight: bold;
}

Ongeza React Router kwenye programu yako.

Wacha programu yako ihusu wanafunzi, ambao habari zao watakuwa wakichapishwa na walimu. Kwa kuzingatia hili, unda kipengele cha mzizi Root. Badilisha kipengele App kama ilivyoelezewa kwenye somo.