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!' мәтіні бар абзац көрсетілетіндей етіңіз.