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!' тексти болгон параграф көрсөтүлүшүн камсыз кылыңыз.