React Router-a ýol ýöredijini goşmak

Router-lar bilen birneme tanyş bolansoň, birini programma goşup bilersiňiz.

Emma ilki, biz öňki sapaklarda döreden programma şablonymyzy birneme arassalamaly. Has dogrusy - src papkasy bilen meşgullanarys. Ondan assets papkasyny, faýllary App.css, App.jsx atyň. Umuman, onuň içinde diňe main.jsx we index.css galar.

index.css açyň we ony doly arassalaň. Boş bolsun.

Indi esasy faýlymyz bilen main.jsx meşgul bolalyň. Onda bizde şeýle kod bolmaly:

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

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

	</React.StrictMode>
);

Indi biz ýol ýöredijini goşup bileris. Biz BrowserRouter ulanyarys, sebäbi ol web-programmalarda köplenç ulanylýar. Häzirki zaman sintaksisini ýatdan çykarmaň. Import setirini goşalyň:

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

Soňra, router konstantany dörediň we özümiziň BrowserRouter döredişimizden soň import setirlerinden soň. Ony şeýle edeliň esasy sahypada bizde 'Hello Router!' ýazgysy bilen div görkezilsin. Bunun üçin esasy sahypa ýoluny we görkeziljek elementi ýazalyň:

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

Biz hälâ komponent goşmaly RouterProvider we ýokarda döreden ýol ýöredijimizi ýazmaly. Ol router obýektleriniň hemmesini kabul edýär, bizim programmamyzy rendere edýär we beýleki API-leri birikdirýär:

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

Doly kod şeýle görüner:

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

Üýtgeşmeleri saklaň. Gutlaýaryn! Bizim programmamyz artok gykyldamaýar. Indi, eger ony işledip ýaýlandyrsak, onda brauzerde esasy sahypada biz 'Hello Router!' göreris.

Görkezilen materialy ulanmak bilen, esasy sahypaňyzda, öňki sapaklaryň öý işlerinde döreden programmaňyzda, sizde 'I'm number one in React!' tekst bilen paragraf görkezilsin.