Shtimi i Router-it në React Router

Duke u njohur pak me router-at, mund të shtojmë një prej tyre në aplikacion.

Por së pari duhet të pastrojmë pak shabllonin e aplikacionit tonë, të cilin e krijuam në mësimet e mëparshme. Më konkretisht - do të merremi me dosjen src. Hidhni prej saj dosjen assets, skedarët App.css, App.jsx. Në përgjithësi, ju do të keni mbetur në të vetëm main.jsx dhe index.css.

Hapni index.css dhe pastrojeni plotësisht. Le të jetë bosh.

Tani le të merremi me skedarin tonë kryesor main.jsx. Në të do të kemi kodin e mëposhtëm:

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

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

	</React.StrictMode>
);

Dhe tani mund të shtojmë router-in. Ne do të përdorim BrowserRouter, pasi është përdorur më së shumti në aplikacionet web. Le të mos harrojmë dhe për sintaksën moderne. Le të shtojmë rreshtin e importit:

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

Pastaj, le të krijojmë konstanten router dhe të krijojmë BrowserRouter tonë pas rreshtave me import. Le ta bëjmë kështu që në faqen kryesore të shfaqet një div me shkrimin 'Hello Router!'. Për këtë do të përcaktojmë shtegun për faqen kryesore dhe elementin që do të shfaqim:

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

Ne duhet gjithashtu të shtojmë komponentin RouterProvider dhe të vendosim router-in që krijuam më lart. Ai pranon të gjithë objektet e router-it, renderon aplikacionin tonë dhe lidh API-të e tjera:

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

Kodi i plotë do të duket kështu:

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>
);

Le të ruajmë ndryshimet. Urime! Aplikacioni ynë nuk ankohet më. Tani, nëse e ekzekutojmë, në faqen kryesore të shfletuesit do të shohim 'Hello Router!'.

Duke përdorur materialin e paraqitur, bëni që në faqen kryesore të aplikacionit tuaj, të cilin e keni krijuar në detyrat e shtëpisë për mësimet e mëparshme, të shfaqet një paragraf me tekstin 'I'm number one in React!'.