React Router හි රවුටරයක් එක් කිරීම

රවුටර ගැන ටිකක් දැනගෙන, අපට ඒවායින් එකක් යෙදුමට එකතු කළ හැකිය.

නමුත් පළමුව අපි අපගේ යෙදුමේ සැකිල්ල, පෙර පාඩම් වලදී අප සෑදූ එය, තරමක් පිරිසිදු කළ යුතුය. විශේෂයෙන්ම - src බහාලුම සමඟ කටයුතු කරමු. එයින් assets බහාලුම, ගොනු App.css, App.jsx ඉවත් කරන්න. සාරාංශයක් ලෙස, ඔබට එහි ඉතිරිව ඇත්තේ main.jsx සහ index.css පමණි.

index.css විවෘත කර එය සම්පූර්ණයෙන්ම පිරිසිදු කරන්න. එය හිස්ව තබන්න.

දැන් අපගේ ප්‍රධාන ගොනුව සමඟ කටයුතු කරමු main.jsx. එහි අපට ඇති කේතය මෙය වේ:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

දැන් අපට රවුටරය එකතු කළ හැකිය. අපි BrowserRouter භාවිතා කරමු, මන්ද එය බොහෝ විට වෙබ් යෙදුම් වල භාවිතා වේ. නවීන වාක්‍ය ඛණ්ඩය ගැන ද අමතක නොකරන්න. ආයාත පේළිය එකතු කරමු:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

ඉන්පසු, router නියතයක් නිර්මාණය කර අපගේ BrowserRouter ආයාත පේළි පසුව සාදන්න. අපගේ ප්‍රධාන පිටුවේ 'Hello Router!' සටහන සමඟ ඩිව් එකක් පෙන්වන ආකාරයට මෙය කරමු. මේ සඳහා ප්‍රධාන පිටුවට ගමන් මාර්ගය සහ අප පෙන්වන මූලද්‍රව්‍යය ලියන්න:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

අපට තවමත් සංරචකය එකතු කළ යුතුය RouterProvider සහ ඉහත අප විසින් සාදන ලද රවුටරය ඇතුළත් කරන්න. එය පිළිගන්නේ රවුටර වස්තු සියල්ල, අපගේ යෙදුම රූප සංස්ලේෂණය කරන අතර වෙනත් API සම්බන්ධ කරයි:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

සම්පූර්ණ කේතය මෙසේ පෙනෙනු ඇත:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

වෙනස්කම් සුරකින්න. සුබ පැතුම්! අපගේ යෙදුම තවදුරටත් නොදොස් පවසන්නේ නැත. දැන්, අපි එය ආරම්භ කළහොත්, පසුව බ්‍රවුසරයේ ප්‍රධාන පිටුවේ අපි 'Hello Router!' දකිමු.

ඉදිරිපත් කරන ලද ද්‍රව්‍ය භාවිතා කරමින්, ඔබගේ ප්‍රධාන පිටුවේ, පෙර පාඩම් සඳහා ඔබ විසින් නිර්මාණය කරන ලද ගෙදර වැඩ සඳහා, පාචකයක් පෙන්වන ලෙස සකසන්න 'I'm number one in React!' පෙළ සමඟ.