Redux යෙදුමක React Router සවිකිරීම

පසුගිය පාඩම් වලදී අපි Redux සමඟ වැඩ කිරීම සඳහා මූලික මෙවලම් සවිකලෙමු. බොහෝ විට යෙදුමට අවශ්‍ය වන්නේ එහි වෙබ් පිටු හරහා සංචාලනය කිරීම සඳහා මාර්ගනිර්දේශකයක් වන අතර අපගේ යෙදුම ව්‍යතිරේකයක් නොවේ. මේ සඳහා අපි React Router පුස්තකාලය සවිකරමු.

අපගේ ව්‍යාපෘතිය විවෘත කර ටර්මිනලයේ පහත දැක්වෙන විධානය ටයිප් කරමු:

npm install react-router-dom

ස්වල්පයක් ඉදිරියෙන් ගියහොත්, අපගේ Redux යෙදුම සාම්ප්‍රදායිකව කැප කර ඇත්තේ නිෂ්පාදන සඳහා වන අතර, ඒවා පිළිබඳ තොරතුරු පළ කරනු ලබන්නේ කිසියම් විකුණුම්කරුවන් විසිනි. එබැවින් දැන් අපි මූලික සංරචකය App ටිකක් නැවත සකස් කරමු, එමෙන්ම යෙදුමට මාර්ගනිර්දේශන ක්‍රියාත්මක කිරීම සඳහා වන ක්‍රියාකාරිත්වය එකතු කරමු.

ආරම්භ කිරීම සඳහා src ෆෝල්ඩරයට, ඉන්පසු app ෆෝල්ඩරයට ගොස් මෙහි root.jsx ගොනුව සාදමු. මෙය අපගේ වෙබ් අඩවියේ මූලය වනු ඇත: වම් පසින් අපට මෙනුවක් ඇති අතර, දකුණු පසින් - අන්තර්ගතය (දැනට මෙහි ඇත්තේ ශීර්ෂකය පමණි):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Products</a>
					<a>Sellers</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>This is my first Redux app!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

සංරචකය App අපි නැවත සකස් කරමු. ආරම්භ කිරීම සඳහා එහි අන්තර්ගතය සම්පූර්ණයෙන්ම ඉවත් කරමු. ඉන්පසු රූටරය සඳහා වන ශ්‍රිත දෙකක් සහ අපගේ මූල සංරචකය Root ආයාත කරමු:

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

ආයාත කිරීමෙන් පසු පහත දැක්වෙන රූටරය සාදමු, සහ පළමු මාර්ගය විධානගත කරමු, එයට අපගේ Root ප්‍රදර්ශනය කළ යුතු අංගය ලෙස ලබා දී ඒ අනුව, පථය '/' ලෙස සකසමු. අනාගතයේදී App හි අපි අවශ්‍ය වෙනත් මාර්ග එකතු කරමු:

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

පහත දැක්වෙන App ශ්‍රිතයේ කේතය ලියමු:

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

export default App

එයයි. දැන් අපි ආරම්භ කරමු. ඊළඟ කොටසෙන් අපි Redux යෙදුම සඳහා වන සංරචක ක්‍රියාත්මක කරමු.

අවසානයේ, අපි ටිකක් සුන්දරත්වය එකතු කරමු, ඒ සඳහා 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;
}

ඔබගේ යෙදුමට React Router එකතු කරන්න.

ඔබගේ යෙදුම සිසුන් පිළිබඳ විය යුතු අතර, ඔවුන් පිළිබඳ තොරතුරු ඉගැන්වීම් කාර්ය මණ්ඩලය විසින් පළ කරනු ඇත. මෙය සැලකිල්ලට ගනිමින්, මූල සංරචකය Root සාදන්න. App සංරචකය පාඩමේ විස්තර කර ඇති පරිදි නැවත සකස් කරන්න.