Kuongeza Router katika React Router

Baada ya kufahamu kidogo kuhusu router, tunaweza kuongeza moja kati yao kwenye programu yetu.

Lakini kwanza tunahitaji kusafisha kidogo kiwango cha programu yetu, ambacho tuliunda katika masomo yaliyopita. Haswa - tutashughulika na folda src. Tuondoe folda assets, faili App.css, App.jsx. Kwa ujumla, ndani yake kubaki tu main.jsx na index.css.

Fungua index.css na uisafishe kabisa. Iache iwe tupu.

Sasa tushughulike na faili yetu kuu main.jsx. Ndani yake tutakuwa na kodi kama hii:

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

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

	</React.StrictMode>
);

Na sasa tunaweza kuongeza router. Tutatumia BrowserRouter, kwa sababu hutumiwa mara nyingi zaidi katika programu za wavuti. Tusisahau kuhusu sintaksia ya kisasa. Tuongeze mstari wa kuagiza:

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

Kisha, tunaweza kuunda mara kwa mara router na kuunda BrowserRouter yetu baada ya mistari na kuagiza. Tufanye hivi ili katika ukurasa mkuu tuonyeshe div yenye maandishi 'Hello Router!'. Ili kufanya hivyo tuandike njia ya ukurasa mkuu na kipengele ambacho tutaonyesha:

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

Bado tunahitaji kuongeza kipengele RouterProvider na kuandika router tuliyoiumba hapo juu. Inakubali vitu vyote vya router, inaonyesha programu yetu na inaunganisha API nyingine:

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

Kodi kamili itaonekana kama hii:

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

Hebu tuokoe mabadiliko. Hongera! Programu yetu haichukuki tena. Sasa, ikiwa tutaizindua, basi kwenye ukurasa mkuu kwenye kivinjari tutaona 'Hello Router!'.

Kwa kutumia nyenzo zilizowasilishwa, fanya ili kwenye ukurasa mkuu wa programu yako ambayo umeunda katika kazi za nyumbani za masomo yaliyopita, uonyeshe aya na maandishi 'I'm number one in React!'.